Rayhan/roda-student-web-if-development-kit
2
1
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity
Files
49081cdfbddc8c0517e84fa950c7de527fbb8bf4
roda-student-web-if-develop…/groups/RODA/index.html
T
GuavaPopper 2166057a8b Percepat fetch data publikasi
2026-06-05 10:20:38 +07:00

2232 lines
160 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorotan dan Prestasi Karya Mahasiswa | Informatika UNTAN</title>
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome untuk Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<script>
tailwind.config = {
theme: {
screens: {
'sm': '390px', // Mobile: 390 x 844
'md': '768px', // Tablet: 768 x 1024
'lg': '1366px', // Laptop: 1366 x 768
'xl': '1920px', // Desktop: 1920 x 1080
'2xl': '1920px'
},
extend: {
fontFamily: {
sans: ['Roboto', 'sans-serif'],
condensed: ['"Roboto Condensed"', 'sans-serif'],
},
colors: {
untan: {
blue: '#005eb8',
navy: '#003150',
dark: '#001f36',
yellow: '#feb401',
light: '#f8fafc'
}
},
boxShadow: {
'soft': '0 20px 50px rgba(0, 49, 80, 0.08)',
'soft-lg': '0 30px 60px rgba(0, 49, 80, 0.12)',
},
fontSize: {
// Mobile (390px)
'xs-mobile': ['11px', '14px'],
'sm-mobile': ['13px', '16px'],
'base-mobile': ['14px', '20px'],
'lg-mobile': ['16px', '24px'],
'xl-mobile': ['18px', '28px'],
'2xl-mobile': ['22px', '32px'],
'3xl-mobile': ['26px', '36px'],
// Tablet (768px)
'xs-tablet': ['12px', '15px'],
'sm-tablet': ['14px', '18px'],
'base-tablet': ['15px', '22px'],
'lg-tablet': ['18px', '26px'],
'xl-tablet': ['20px', '30px'],
'2xl-tablet': ['24px', '34px'],
'3xl-tablet': ['28px', '38px'],
// Laptop (1366px)
'xs-laptop': ['13px', '16px'],
'sm-laptop': ['14px', '19px'],
'base-laptop': ['16px', '23px'],
'lg-laptop': ['18px', '27px'],
'xl-laptop': ['20px', '31px'],
'2xl-laptop': ['24px', '35px'],
'3xl-laptop': ['30px', '40px'],
}
}
}
}
</script>
<script>
window.APP_CONFIG = window.APP_CONFIG || {
debugLogs: false,
dashboardRuntimeFetch: 'always',
dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
dashboardProxyTemplates: [
'https://api.codetabs.com/v1/proxy?quest={{url}}'
]
};
</script>
<!-- RODA_DASHBOARD_DATA -->
<link rel="stylesheet" href="style.css">
</head>
<body
class="bg-gray-50 font-sans text-gray-800 antialiased selection:bg-untan-yellow selection:text-untan-navy pt-[120px] sm:pt-[125px] md:pt-[140px] lg:pt-[160px] xl:pt-[180px]">
<!-- Navbar & Header -->
<div id="nav-wrapper"
class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
<div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
<div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
<div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
style="overflow:hidden;max-height:100%;">
01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
</div>
<div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
</div>
<div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
<a href="../../index.html" class="flex items-center gap-4 group">
<div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
</div>
<div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
<span
class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
<span
class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
TANJUNGPURA</span>
</div>
</a>
<div class="hidden lg:flex items-center gap-5">
<div class="flex items-center gap-3 text-sm">
<a href="https://satu.untan.ac.id" target="_blank"
class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
</div>
<div class="pl-5 border-l border-white/20 flex items-center gap-3">
<button
class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
<span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Pengaturan aksesibilitas"
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
<i class="fas fa-universal-access" aria-hidden="true"></i>
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Cari konten">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<button id="mobile-menu-button"
class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
</div>
<nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
aria-label="Menu navigasi utama">
<div class="container mx-auto px-6">
<div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">
<!-- Menu: Tentang Kami -->
<div class="nav-menu-item relative" data-menu="tentang">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_about">Tentang Kami</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Program -->
<div class="nav-menu-item relative" data-menu="program">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_program">Program</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: SDM -->
<div class="nav-menu-item relative" data-menu="sdm">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_sdm">SDM</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Fasilitas -->
<div class="nav-menu-item relative" data-menu="fasilitas">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_facilities">Fasilitas</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Karya & Agenda -->
<div class="nav-menu-item relative" data-menu="karya">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_works">Karya & Agenda</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Kontak -->
<div class="nav-menu-item relative" data-menu="kontak">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_contact">Kontak</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
</div>
</div>
<!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
<div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">
<!-- Mega Menu: Tentang Kami -->
<div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-12 gap-8">
<!-- Left: Featured -->
<div class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16"></div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12"></div>
<div class="relative z-10">
<span class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4" data-i18n="mega_about_title">Tentang Kami</span>
<h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
<p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi sejak 1993.</p>
<a href="content.html?type=berita" class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">Selengkapnya <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<!-- Right: Links -->
<div class="col-span-8 grid grid-cols-2 gap-6">
<a href="content.html?type=berita" class="mega-link-card group">
<div class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"><i class="fas fa-landmark"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_history">Sejarah & Tonggak</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan panjang membangun generasi digital</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"><i class="fas fa-users"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_org">Struktur Organisasi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan jajaran pengelola</p>
</div>
</a>
<a href="profil.html" class="mega-link-card group">
<div class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white"><i class="fas fa-bullseye"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_vision">Visi & Misi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan tujuan pengembangan prodi</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white"><i class="fas fa-handshake"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_collaboration">Kerjasama & MoU</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_collaboration_desc">Mitra industri dan akademik</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Program -->
<div id="mega-program" class="mega-panel bg-white border-b-4 border-blue-600 shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12"></div>
<div class="relative z-10">
<span class="inline-block px-3 py-1 bg-white text-blue-600 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4" data-i18n="nav_program">Program</span>
<h3 class="text-2xl font-bold mb-3">Program Studi & Kurikulum</h3>
<p class="text-slate-200 text-sm mb-6 leading-relaxed">Berbasis OBE dengan 4 konsentrasi keahlian</p>
<a href="subject-and-courses.html" class="inline-flex items-center gap-2 text-white font-semibold text-sm hover:gap-3 transition-all">Lihat Semua <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="col-span-8 grid grid-cols-2 gap-6">
<a href="subject-and-courses.html" class="mega-link-card group">
<div class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"><i class="fas fa-book"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_academic">Akademik</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">Jadwal, KRS, dan kalender akademik</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"><i class="fas fa-certificate"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_accreditation">Akreditasi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_accreditation_desc">Status Unggul BAN-PT</p>
</div>
</a>
<a href="graduate-profile.html" class="mega-link-card group">
<div class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white"><i class="fas fa-user-check"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_graduate">Profil Lulusan</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_graduate_desc">Kompetensi & karir</p>
</div>
</a>
<a href="subject-and-courses.html" class="mega-link-card group">
<div class="mega-link-icon bg-sky-50 text-sky-600 group-hover:bg-sky-600 group-hover:text-white"><i class="fas fa-list-check"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_courses">Mata Kuliah</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_courses_desc">144 SKS kurikulum</p>
</div>
</a>
<a href="academic-guidelines.html" class="mega-link-card group">
<div class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"><i class="fas fa-scroll"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_guideline">Panduan Akademik</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_guideline_desc">Buku panduan akademik</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"><i class="fas fa-megaphone"></i></div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors" data-i18n="link_announcements">Pengumuman</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_announcements_desc">Update program studi</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Mega Menu: SDM -->
<div id="mega-sdm" class="mega-panel bg-white border-b-4 border-emerald-600 shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-2 gap-12">
<div>
<h4 class="text-sm font-bold text-emerald-600 uppercase tracking-widest mb-4" data-i18n="nav_sdm">SDM</h4>
<ul class="space-y-3">
<li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="btn_all_lecturers">Semua Dosen</a></li>
<li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_ai">Kecerdasan Buatan</a></li>
<li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_se">Rekayasa Perangkat Lunak</a></li>
<li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_network">Jaringan & Keamanan</a></li>
<li><a href="people-based-on-kk.html" class="text-slate-700 hover:text-emerald-600 font-medium transition-colors" data-i18n="kk_si">Sistem Informasi</a></li>
</ul>
</div>
<div class="bg-emerald-50 rounded-lg p-6">
<h4 class="text-sm font-bold text-emerald-700 mb-3">Statistik SDM</h4>
<p class="text-slate-600 text-sm leading-relaxed">Tim pengajar profesional dengan S2/S3 dari universitas terkemuka, siap membimbing generasi teknolog masa depan.</p>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Fasilitas -->
<div id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-amber-600 shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-2 gap-12">
<div>
<h4 class="text-sm font-bold text-amber-600 uppercase tracking-widest mb-4" data-i18n="nav_facilities">Fasilitas</h4>
<ul class="space-y-3">
<li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_lab">Laboratorium</a></li>
<li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_dc">Data Center</a></li>
<li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_eresources">E-Resources</a></li>
<li><a href="ifuntanhub.html" class="text-slate-700 hover:text-amber-600 font-medium transition-colors" data-i18n="mega_ifuntanhub">IF UNTan Hub</a></li>
</ul>
</div>
<div class="bg-amber-50 rounded-lg p-6">
<h4 class="text-sm font-bold text-amber-700 mb-3">Akses Fasilitas</h4>
<p class="text-slate-600 text-sm leading-relaxed">Fasilitas lengkap dengan teknologi terkini untuk mendukung pembelajaran dan penelitian.</p>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Karya & Agenda -->
<div id="mega-karya" class="mega-panel bg-white border-b-4 border-pink-600 shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-2 gap-12">
<div>
<h4 class="text-sm font-bold text-pink-600 uppercase tracking-widest mb-4" data-i18n="nav_works">Karya & Agenda</h4>
<ul class="space-y-3">
<li><a href="karya.html" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_all_karya">Semua Karya</a></li>
<li><a href="karya.html?filter=penelitian" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_research">Riset</a></li>
<li><a href="karya.html?filter=pkm" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_community">Pengabdian Masyarakat</a></li>
<li><a href="content.html?type=rubrik" class="text-slate-700 hover:text-pink-600 font-medium transition-colors" data-i18n="link_achievements">Prestasi</a></li>
</ul>
</div>
<div class="bg-pink-50 rounded-lg p-6">
<h4 class="text-sm font-bold text-pink-700 mb-3">Event Mendatang</h4>
<p class="text-slate-600 text-sm leading-relaxed">Ikuti seminar, workshop, dan acara akademik kami sepanjang tahun.</p>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Kontak -->
<div id="mega-kontak" class="mega-panel bg-white border-b-4 border-violet-600 shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-2 gap-12">
<div>
<h4 class="text-sm font-bold text-violet-600 uppercase tracking-widest mb-4" data-i18n="nav_contact">Kontak</h4>
<ul class="space-y-3">
<li><a href="content.html?type=berita" class="text-slate-700 hover:text-violet-600 font-medium transition-colors" data-i18n="link_official_contact">Kontak Resmi</a></li>
<li><a href="mailto:info@informatika.untan.ac.id" class="text-slate-700 hover:text-violet-600 font-medium transition-colors" data-i18n="link_feedback">Saran & Masukan</a></li>
<li><a href="https://instagram.com/informatika.untan" target="_blank" class="text-slate-700 hover:text-violet-600 font-medium transition-colors"><i class="fab fa-instagram mr-2"></i>Instagram</a></li>
</ul>
</div>
<div class="bg-violet-50 rounded-lg p-6">
<h4 class="text-sm font-bold text-violet-700 mb-3">Informasi Kontak</h4>
<p class="text-slate-600 text-xs leading-relaxed">
📧 info@informatika.untan.ac.id<br>
📞 +62 851-7165-5161<br>
🏢 Jl. Jenderal A. Yani No. 111, Pontianak
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End mega-menu-container -->
</nav>
<!-- Overlay for mega menu -->
<div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu"
class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
<div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
<div class="flex items-center gap-4">
<span class="font-bold text-lg text-white font-sans">Menu Utama</span>
<button
class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
aria-label="Ganti bahasa">
<span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
</button>
<button
class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
aria-label="Pengaturan aksesibilitas"
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
<i class="fas fa-universal-access" aria-hidden="true"></i>
</button>
</div>
<button id="close-mobile-menu"
class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
aria-label="Tutup menu navigasi">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
<a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
data-i18n="nav_home">Beranda</a>
<!-- Tentang Kami -->
<div class="pt-2">
<span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_about">Tentang
Kami</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_history">Sejarah & Tonggak</a>
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_org">Struktur Organisasi</a>
<a href="profil.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_vision">Visi & Misi</a>
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_partnership">Kerjasama & MoU</a>
</div>
</div>
<!-- Program -->
<div class="pt-2 border-t border-slate-200">
<span class="text-xs font-bold text-slate-400 uppercase font-sans"
data-i18n="nav_program">Program</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_academic">Akademik</a>
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_accreditation">Akreditasi</a>
<a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_graduate">Profil Lulusan</a>
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_courses">Mata Kuliah</a>
<a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_guideline">Panduan Akademik</a>
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_statistics">Pengumuman</a>
</div>
</div>
<!-- SDM -->
<div class="pt-2 border-t border-slate-200">
<span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_sdm">SDM</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="people-based-on-kk.html"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
data-i18n="btn_all_lecturers">Semua Dosen</a>
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="kk_ai">Kecerdasan Buatan</a>
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="kk_network">Jaringan & Keamanan</a>
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="kk_is">Sistem Informasi</a>
</div>
</div>
<!-- Fasilitas -->
<div class="pt-2 border-t border-slate-200">
<span class="text-xs font-bold text-slate-400 uppercase font-sans"
data-i18n="nav_facilities">Fasilitas</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="mega_lab">Laboratorium</a>
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="mega_dc">Data Center</a>
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="mega_eresources">E-Resources</a>
<a href="ifuntanhub.html"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
</div>
</div>
<!-- Karya & Agenda -->
<div class="pt-2 border-t border-slate-200">
<span class="text-xs font-bold text-slate-400 uppercase font-sans" data-i18n="nav_works">Karya &
Agenda</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_all_karya">Semua Karya</a>
<a href="karya.html?filter=penelitian"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_research">Riset</a>
<a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_community">Pengabdian Masyarakat</a>
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_achievements">Prestasi</a>
</div>
</div>
<!-- Kontak -->
<div class="pt-2 border-t border-slate-200 pb-8">
<span class="text-xs font-bold text-slate-400 uppercase font-sans"
data-i18n="nav_contact">Kontak</span>
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_official_contact">Kontak Resmi</a>
<a href="mailto:info@informatika.untan.ac.id"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_feedback">Saran & Masukan</a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
<i class="fab fa-instagram text-pink-500"></i> Instagram
</a>
</div>
</div>
</div>
</div>
<!-- Hero Section -->
<header class="bg-untan-navy relative reveal">
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 relative z-10 py-8 sm:py-12 md:py-16 lg:py-20 xl:py-24">
<div class="inline-block bg-untan-yellow text-untan-navy text-[10px] sm:text-xs md:text-xs lg:text-xs xl:text-sm font-bold px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-4 py-1 rounded mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5 uppercase tracking-wider"
data-i18n="badgeHero">
Riset & Kelompok Bidang Keahlian
</div>
<h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-white mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6 leading-tight"
data-i18n="heroTitle">
Riset & Kelompok Bidang Keahlian
</h2>
<p class="text-gray-300 max-w-2xl text-xs sm:text-sm md:text-base lg:text-lg xl:text-lg mb-6 sm:mb-8 md:mb-8 lg:mb-8 xl:mb-10 leading-relaxed" data-i18n="heroDesc">
Kenali Kelompok Bidang Keahlian (KBK) kami. Jelajahi riset unggulan dosen dan mahasiswa di bidang
Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, hingga IoT
</p>
<div class="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 md:gap-4 lg:gap-5 xl:gap-6">
<a href="#kbk-section"
class="inline-flex items-center justify-center sm:justify-start gap-2 px-4 sm:px-6 md:px-6 lg:px-6 xl:px-8 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-4 rounded-xl bg-untan-yellow text-untan-navy font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-lg hover:bg-yellow-300 transition-colors">
<i class="fa-solid fa-layer-group"></i>
<span data-i18n="quickActionKbk">Jelajahi KBK</span>
</a>
<a href="#riset-section"
class="inline-flex items-center justify-center sm:justify-start gap-2 px-4 sm:px-6 md:px-6 lg:px-6 xl:px-8 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-4 rounded-xl border border-white/30 text-white font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-lg hover:bg-white/10 transition-colors">
<i class="fa-solid fa-magnifying-glass-chart"></i>
<span data-i18n="quickActionRiset">Cari Publikasi</span>
</a>
</div>
</div>
</header>
<!-- Main Content Sections -->
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
<main id="main-content">
<!-- KBK Section -->
<section class="bg-slate-50 py-10 sm:py-14 md:py-16 lg:py-20 xl:py-24 border-t border-gray-100 reveal" id="kbk-section">
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
<div class="text-center mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
<span
class="inline-block bg-untan-blue/10 text-untan-blue text-[9px] sm:text-[10px] md:text-xs lg:text-xs xl:text-[10px] font-bold px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-0.75 sm:py-1 md:py-1 lg:py-1 xl:py-1 rounded-full uppercase tracking-widest mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5"
data-i18n="badgeHero">Kelompok Bidang Keahlian</span>
<h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6" data-i18n="kbkTitle">
4 Pilar Keilmuan Informatika UNTAN</h2>
<p class="text-gray-500 max-w-2xl mx-auto text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="kbkDesc">Setiap KBK berfokus pada
topik riset spesifik, dipimpin dosen berpengalaman, dan terbuka untuk kolaborasi.</p>
</div>
<div id="kbk-card-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 lg:gap-7 xl:gap-8">
<!-- AI Card -->
<article data-kbk-card="ai"
class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
<div
class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
<i class="fa-solid fa-brain"></i>
</div>
<h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterAI">Kecerdasan Buatan</h3>
<p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkAIDesc">Sistem cerdas berbasis AI, deep
learning, vision, dan NLP untuk solusi nyata.</p>
<div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Vision</span>
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">NLP</span>
</div>
<div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
<div class="flex -space-x-2">
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
AS</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
RH</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+6</div>
</div>
<button type="button" onclick="openKbkInsight('ai')"
aria-label="Lihat detail Kecerdasan Buatan"
class="text-untan-yellow group-hover:translate-x-1 transition-transform">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</article>
<!-- RPL Card -->
<article data-kbk-card="rpl"
class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
<div
class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterRPL">Rekayasa Perangkat
Lunak</h3>
<p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkRPLDesc">Metodologi, arsitektur, dan
kualitas perangkat lunak modern serta DevOps.</p>
<div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">DevOps</span>
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Agile</span>
</div>
<div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
<div class="flex -space-x-2">
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
DW</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
PN</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+8</div>
</div>
<button type="button" onclick="openKbkInsight('rpl')"
aria-label="Lihat detail Rekayasa Perangkat Lunak"
class="text-untan-yellow group-hover:translate-x-1 transition-transform">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</article>
<!-- Net Card -->
<article data-kbk-card="net"
class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
<div
class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
<i class="fa-solid fa-shield-halved"></i>
</div>
<h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterNet">Jaringan & Keamanan
</h3>
<p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkNetDesc">Infrastruktur jaringan handal,
keamanan siber, dan teknologi Cloud/IoT.</p>
<div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Cybersec</span>
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">IoT</span>
</div>
<div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
<div class="flex -space-x-2">
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
HF</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
SA</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+5</div>
</div>
<button type="button" onclick="openKbkInsight('net')"
aria-label="Lihat detail Jaringan dan Keamanan"
class="text-untan-yellow group-hover:translate-x-1 transition-transform">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</article>
<!-- SI Card -->
<article data-kbk-card="si"
class="bg-white p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl shadow-soft border border-gray-100 hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col h-full border-t-4 border-t-untan-navy">
<div
class="w-12 h-12 sm:w-12 md:w-13 lg:w-14 xl:w-14 bg-slate-50 text-untan-navy rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl flex items-center justify-center mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 text-xl sm:text-xl md:text-2xl lg:text-2xl xl:text-2xl group-hover:bg-untan-yellow group-hover:text-untan-navy transition-all duration-300">
<i class="fa-solid fa-database"></i>
</div>
<h3 class="text-base sm:text-base md:text-lg lg:text-xl xl:text-xl font-bold text-untan-navy mb-3 sm:mb-3 md:mb-4 lg:mb-4 xl:mb-4" data-i18n="filterSI">Sistem Informasi</h3>
<p class="text-gray-600 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm leading-relaxed mb-4 sm:mb-5 md:mb-6 lg:mb-6 xl:mb-6 flex-grow" data-i18n="kbkSIDesc">Manajemen informasi, GIS, big
data, dan sistem pendukung keputusan.</p>
<div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-2 xl:gap-2 mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8">
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">Big
Data</span>
<span
class="text-[9px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] bg-slate-50 text-gray-500 border border-gray-100 px-2.5 sm:px-3 md:px-3 lg:px-3 xl:px-3 py-1 rounded-lg font-mono">GIS</span>
</div>
<div class="flex items-center justify-between pt-4 sm:pt-5 md:pt-6 lg:pt-6 xl:pt-6 border-t border-gray-100">
<div class="flex -space-x-2">
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-navy border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
LP</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-untan-blue border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-white shadow-sm">
FN</div>
<div
class="w-7 h-7 sm:w-7 md:w-8 lg:w-8 xl:w-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[8px] sm:text-[8px] md:text-[9px] lg:text-[10px] xl:text-[10px] font-bold text-gray-400 shadow-sm">
+4</div>
</div>
<button type="button" onclick="openKbkInsight('si')"
aria-label="Lihat detail Sistem Informasi"
class="text-untan-yellow group-hover:translate-x-1 transition-transform">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</article>
</div>
<section id="kbk-insight-section"
class="mt-8 sm:mt-10 md:mt-12 lg:mt-12 xl:mt-12 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-white shadow-soft overflow-hidden">
<div class="grid lg:grid-cols-[0.95fr_1.05fr]">
<div id="kbk-insight-hero"
class="p-5 sm:p-6 md:p-8 lg:p-10 xl:p-10 border-b lg:border-b-0 lg:border-r border-slate-100 bg-gradient-to-br from-untan-blue/10 via-white to-untan-yellow/10">
<div
class="inline-flex items-center gap-2 rounded-full bg-white/80 px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-1.75 md:py-2 lg:py-2 xl:py-2 text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.24em] text-untan-blue">
<i id="kbk-insight-icon" class="fa-solid fa-brain"></i>
<span id="kbk-insight-badge">KBK Insight</span>
</div>
<h3 id="kbk-insight-title"
class="mt-4 sm:mt-5 md:mt-6 lg:mt-6 xl:mt-6 text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-4xl font-bold font-condensed text-untan-navy"></h3>
<p id="kbk-insight-desc" class="mt-3 sm:mt-4 md:mt-5 lg:mt-5 xl:mt-5 text-slate-600 text-xs sm:text-sm md:text-base lg:text-base xl:text-base leading-relaxed"></p>
<div class="mt-6 sm:mt-7 md:mt-8 lg:mt-8 xl:mt-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-white/80 bg-white/90 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6 shadow-soft">
<p id="kbk-insight-lead-label"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
<div class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 flex items-center gap-3 sm:gap-3.5 md:gap-4 lg:gap-4 xl:gap-4">
<div id="kbk-insight-lead-initials"
class="flex h-12 w-12 sm:h-12 md:h-14 lg:h-16 xl:h-16 sm:w-12 md:w-14 lg:w-16 xl:w-16 items-center justify-center rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl bg-untan-navy text-white text-lg sm:text-lg md:text-xl lg:text-xl xl:text-xl font-bold">
</div>
<div>
<h4 id="kbk-insight-lead-name" class="text-base sm:text-base md:text-lg lg:text-lg xl:text-lg font-bold text-untan-navy"></h4>
<p id="kbk-insight-lead-rank" class="text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-500"></p>
</div>
</div>
</div>
</div>
<div class="p-5 sm:p-6 md:p-8 lg:p-10 xl:p-10">
<div class="grid md:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-6 xl:gap-6">
<div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
<p id="kbk-focus-label"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
<p id="kbk-focus-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
</div>
<div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
<p id="kbk-output-label"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
<p id="kbk-output-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
</div>
<div class="rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 bg-slate-50 p-4 sm:p-5 md:p-6 lg:p-6 xl:p-6">
<p id="kbk-collab-label"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
<p id="kbk-collab-text" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-600 leading-relaxed"></p>
</div>
</div>
<div class="mt-6 sm:mt-7 md:mt-8 lg:mt-8 xl:mt-8">
<p id="kbk-topic-label"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400"></p>
<div id="kbk-topic-tags" class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-4 xl:mt-4 flex flex-wrap gap-2.5 sm:gap-3 md:gap-3 lg:gap-3 xl:gap-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-untan-navy py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 relative overflow-hidden reveal">
<div class="absolute inset-0 opacity-[0.03] bg-pattern pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 relative z-10">
<div class="grid grid-cols-2 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10 lg:gap-12 xl:gap-10 text-center">
<div>
<div id="stat-pub" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">400+</div>
<p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold" data-i18n="statsPub">
Hasil Penelitian</p>
</div>
<div>
<div id="stat-sinta" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-white mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">7.555</div>
<p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
data-i18n="statsSinta">Skor SINTA</p>
</div>
<div>
<div id="stat-dosen" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">33</div>
<p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
data-i18n="statsDosen">Dosen Homebase</p>
</div>
<div>
<div id="stat-collab" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-white mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">10+</div>
<p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold"
data-i18n="statsKolaborasi">Kerjasama Aktif</p>
</div>
<div class="col-span-2 lg:col-span-1">
<div id="stat-mhs" class="text-3xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-5xl font-bold font-condensed text-untan-yellow mb-1.5 sm:mb-2 md:mb-2 lg:mb-2 xl:mb-2">518</div>
<p class="text-[8px] sm:text-[9px] md:text-[10px] lg:text-[10px] xl:text-[10px] text-slate-300 uppercase tracking-widest font-bold" data-i18n="statsMhs">Mahasiswa Aktif</p>
</div>
</div>
</div>
</section>
<!-- Riset & Publikasi Section -->
<section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 bg-white reveal" id="riset-section">
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
<div class="flex flex-col lg:flex-row lg:items-start justify-between mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20 gap-6 sm:gap-8 md:gap-10 lg:gap-8">
<div class="max-w-2xl">
<span class="text-untan-blue font-bold text-[9px] sm:text-[10px] md:text-xs lg:text-xs xl:text-xs uppercase tracking-widest mb-2 sm:mb-3 md:mb-3 lg:mb-3 xl:mb-3 block">Academic
Achievements</span>
<h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6"
data-i18n="risetTitle">Publikasi & Penelitian Terkini</h2>
<div class="w-20 sm:w-20 md:w-24 lg:w-24 xl:w-24 h-0.75 sm:h-1 md:h-1 lg:h-1 xl:h-1 bg-untan-yellow rounded-full"></div>
</div>
<!-- Filter Controls -->
<div class="w-full lg:w-auto space-y-2 sm:space-y-2.5 md:space-y-3 lg:space-y-3 xl:space-y-3">
<label for="riset-search"
class="text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold uppercase tracking-wider text-slate-500 block"
data-i18n="searchLabel">Cari publikasi</label>
<div class="relative">
<i
class="fa-solid fa-magnifying-glass absolute left-3 sm:left-3.5 md:left-4 lg:left-4 xl:left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
<input id="riset-search" oninput="searchRiset(this.value)"
data-i18n-placeholder="searchPlaceholder" type="text"
class="w-full lg:w-[300px] xl:w-[320px] pl-9 sm:pl-10 md:pl-10 lg:pl-10 xl:pl-10 pr-9 sm:pr-10 md:pr-10 lg:pr-10 xl:pr-10 py-2.5 sm:py-3 md:py-3 lg:py-3 xl:py-3 rounded-xl border border-slate-200 text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:border-untan-blue focus:ring-2 focus:ring-untan-blue/10"
placeholder="Cari judul, penulis, atau venue...">
<button id="clear-riset-search"
onclick="document.getElementById('riset-search').value=''; searchRiset('')"
aria-label="Reset pencarian publikasi"
class="hidden absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 sm:w-6 sm:h-6 md:w-6 md:h-6 lg:w-6 lg:h-6 xl:w-6 xl:h-6 rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors">
<i class="fa-solid fa-xmark text-xs"></i>
</button>
</div>
<div class="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-3 sm:gap-4 md:gap-4 lg:gap-3 xl:gap-4">
<div class="flex flex-wrap gap-1.5 sm:gap-2 md:gap-2 lg:gap-1.5 xl:gap-2 p-1 sm:p-1.5 md:p-1.5 lg:p-1.5 xl:p-1.5 bg-gray-50 rounded-xl border border-gray-100 w-full sm:w-auto">
<button onclick="filterRiset('all')" data-filter="all"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg bg-untan-navy text-white shadow-soft font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterAll">Semua</button>
<button onclick="filterRiset('ai')" data-filter="ai"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterAI">AI</button>
<button onclick="filterRiset('algo')" data-filter="algo"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterAlgo">Algoritma</button>
<button onclick="filterRiset('rpl')" data-filter="rpl"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterRPL">RPL</button>
<button onclick="filterRiset('net')" data-filter="net"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterNet">Jaringan</button>
<button onclick="filterRiset('si')" data-filter="si"
class="filter-btn px-3 sm:px-4 md:px-5 lg:px-5 xl:px-5 py-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-untan-navy font-bold text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] uppercase tracking-wider transition-all"
data-i18n="filterSI">SI</button>
</div>
<div class="flex items-center gap-2 sm:gap-2.5 md:gap-3 lg:gap-3 xl:gap-3">
<span data-i18n="showingRiset"
class="text-[9px] sm:text-[10px] md:text-[10px] lg:text-[10px] xl:text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tampilkan:</span>
<div class="flex gap-1 sm:gap-1.5 md:gap-1.5 lg:gap-1.5 xl:gap-1.5">
<button onclick="setLimit(9)" data-limit="9"
class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-untan-navy text-white shadow-soft text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">9</button>
<button onclick="setLimit(50)" data-limit="50"
class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">50</button>
<button onclick="setLimit(100)" data-limit="100"
class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">100</button>
<button onclick="setLimit(200)" data-limit="200"
class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">200</button>
<button onclick="setLimit(500)" data-limit="500"
class="limit-btn px-3 sm:px-3.5 md:px-4 lg:px-4 xl:px-4 py-1.5 sm:py-2 md:py-2 lg:py-2 xl:py-2 rounded-xl bg-white text-slate-500 border border-slate-200 hover:bg-slate-50 text-[10px] sm:text-[11px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-bold transition-all">500</button>
</div>
</div>
</div>
<p><span data-i18n="lastUpdatedText">This page was last updated on: </span><span id="last-updated"></span></p>
<div id="riset-count-info"
class="mt-3 sm:mt-3.5 md:mt-4 lg:mt-3 xl:mt-4 text-[10px] sm:text-[10px] md:text-[11px] lg:text-[11px] xl:text-[11px] font-medium text-slate-400 uppercase tracking-widest">
Menghitung data...
</div>
</div>
</div>
<div id="riset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8 xl:gap-8 mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20">
<!-- Cards generated by JS -->
</div>
<div id="view-all-section" class="text-center" style="display: none;">
<button onclick="setLimit(50)"
class="group inline-flex items-center gap-3 px-8 sm:px-10 md:px-10 lg:px-10 xl:px-12 py-3 sm:py-4 md:py-4 lg:py-4 xl:py-5 bg-white border-2 border-untan-navy text-untan-navy font-bold text-sm sm:text-base md:text-base lg:text-base xl:text-base rounded-full hover:bg-untan-navy hover:text-white transition-all duration-300">
<span data-i18n="viewAll">Lihat Publikasi Lainnya</span>
<i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
</button>
</div>
</div>
</section>
<!-- Dosen Section -->
<section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-28 bg-gray-50 reveal" id="dosen-section">
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
<div class="text-center mb-12 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28">
<span
class="inline-block bg-blue-100 text-untan-blue text-[10px] sm:text-[10px] md:text-xs lg:text-xs xl:text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest mb-3 sm:mb-4 md:mb-4 lg:mb-4 xl:mb-5">Experts
Directory</span>
<h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-gray-900 mb-3 sm:mb-4 md:mb-4 lg:mb-5 xl:mb-6" data-i18n="dosenTitle">
Peneliti & Dosen per Kelompok Keahlian</h2>
<p class="max-w-3xl mx-auto text-slate-500 text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="dosenLeadDesc">Bagian ini menampilkan
ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
</div>
<div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
<!-- Cards generated by JS -->
</div>
</div>
</section>
<!-- Labs Section -->
<section class="py-12 sm:py-16 md:py-20 lg:py-24 xl:py-32 bg-white reveal" id="lab-section">
<div class="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
<div class="flex flex-col lg:flex-row lg:items-center justify-between mb-12 sm:mb-16 md:mb-20 lg:mb-24 xl:mb-28 gap-8 sm:gap-10 md:gap-12 lg:gap-12 xl:gap-12">
<div class="max-w-2xl">
<h2 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold font-condensed text-untan-navy mb-5 sm:mb-6 md:mb-7 lg:mb-8 xl:mb-8 leading-tight"
data-i18n="labTitle">Laboratorium Pendukung Riset</h2>
<p class="text-slate-500 text-xs sm:text-sm md:text-base lg:text-base xl:text-lg leading-relaxed" data-i18n="labDesc">5 laboratorium modern dengan 93 unit PC All-in-One
yang mendukung kegiatan riset strategis dan pengembangan teknologi dosen serta mahasiswa.
</p>
</div>
<div class="shrink-0">
<div class="bg-slate-50 p-6 sm:p-7 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl border border-slate-100 text-center shadow-soft">
<div class="text-4xl sm:text-4xl md:text-5xl lg:text-5xl xl:text-5xl font-bold text-untan-navy mb-2">05</div>
<div class="text-[9px] sm:text-[10px] md:text-[10px] lg:text-[10px] xl:text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">Labs Modern
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-7 md:gap-8 lg:gap-8 xl:gap-8">
<!-- Lab 1: Komputer & Pemrograman -->
<div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
<div class="flex items-start justify-between mb-6 sm:mb-7">
<div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
<i class="fa-solid fa-laptop-code"></i>
</div>
<div class="flex flex-col items-end gap-1.5">
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
<i class="fa-solid fa-desktop text-[9px]"></i> 25 PC
</span>
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
<i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
</span>
</div>
</div>
<h4 data-i18n="labKom" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputer & Pemrograman</h4>
<p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/D48 &mdash; Kepala: Helen Sastypratiwi, S.T., M.Eng.</p>
<p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labComputerDesc">Mendukung mata kuliah pemrograman dasar hingga lanjut, pengembangan aplikasi web, mobile, dan rekayasa perangkat lunak.</p>
<div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">VS Code</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Node.js</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Android Studio</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Python 3</span>
</div>
</div>
<!-- Lab 2: Jaringan, Keamanan & IoT -->
<div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
<div class="flex items-start mb-6 sm:mb-7">
<div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
<i class="fa-solid fa-network-wired"></i>
</div>
</div>
<h4 data-i18n="labNet" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Jaringan, Keamanan & IoT</h4>
<p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/02 &mdash; Kepala: Heri Priyanto, ST., MT.</p>
<p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labNetDesc">Sarana praktik jaringan, konfigurasi router/switch, keamanan siber, administrasi sistem, dan pengembangan perangkat IoT.</p>
<div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Cisco Packet</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Wireshark</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Raspberry Pi</span>
</div>
</div>
<!-- Lab 3: Rekayasa PL & Data -->
<div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
<div class="flex items-start justify-between mb-6 sm:mb-7">
<div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
<i class="fa-solid fa-database"></i>
</div>
<div class="flex flex-col items-end gap-1.5">
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
<i class="fa-solid fa-desktop text-[9px]"></i> 25 PC
</span>
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
<i class="fa-solid fa-user-group text-[9px]"></i> 25 <span data-i18n="mhs">Mahasiswa</span>
</span>
</div>
</div>
<h4 data-i18n="labData" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Rekayasa PL & Data</h4>
<p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/03 &mdash; Kepala: Rudy Dwi Nyoto, ST., M.Eng.</p>
<p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labDataDesc">Mendukung pembelajaran basis data, pemodelan data, data warehousing, dan analitik data skala besar.</p>
<div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">MySQL</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">PostgreSQL</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">MongoDB</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">RapidMiner</span>
</div>
</div>
<!-- Lab 4: Teknologi & Sistem Informasi -->
<div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
<div class="flex items-start justify-between mb-6 sm:mb-7">
<div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
<i class="fa-solid fa-sitemap"></i>
</div>
<div class="flex flex-col items-end gap-1.5">
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
<i class="fa-solid fa-desktop text-[9px]"></i> 21 PC
</span>
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
<i class="fa-solid fa-user-group text-[9px]"></i> 21 <span data-i18n="mhs">Mahasiswa</span>
</span>
</div>
</div>
<h4 data-i18n="labSI" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Teknologi & Sistem Informasi</h4>
<p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/04 &mdash; Kepala: Anggi Srimurdianti Sukamto, ST., MT.</p>
<p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labInfoDesc">Merancang arsitektur sistem informasi, memodelkan proses bisnis digital, serta menumbuhkan jiwa technopreneurship.</p>
<div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Bizagi</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Power BI</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Figma</span>
</div>
</div>
<!-- Lab 5: Komputasi & Kecerdasan Buatan -->
<div class="p-7 sm:p-8 md:p-8 lg:p-8 xl:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-soft hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group flex flex-col">
<div class="flex items-start justify-between mb-6 sm:mb-7">
<div class="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 rounded-2xl flex items-center justify-center text-2xl sm:text-3xl shadow-inner group-hover:bg-untan-blue/5 transition-colors duration-500 text-untan-navy">
<i class="fa-solid fa-brain"></i>
</div>
<div class="flex flex-col items-end gap-1.5">
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-blue-50 text-untan-blue px-2.5 py-1 rounded-lg border border-blue-100">
<i class="fa-solid fa-desktop text-[9px]"></i> 22 PC
</span>
<span class="inline-flex items-center gap-1.5 text-[10px] font-bold bg-slate-50 text-slate-500 px-2.5 py-1 rounded-lg border border-slate-100">
<i class="fa-solid fa-user-group text-[9px]"></i> 22 <span data-i18n="mhs">Mahasiswa</span>
</span>
</div>
</div>
<h4 data-i18n="labAI" class="text-lg sm:text-xl font-bold mb-1.5 text-untan-navy">Lab Komputasi & Kecerdasan Buatan</h4>
<p class="text-[10px] sm:text-[11px] font-mono text-slate-400 mb-3">LAB/05 &mdash; Kepala: Tursina, ST, M.Cs.</p>
<p class="text-slate-500 text-xs sm:text-sm leading-relaxed mb-6 flex-grow" data-i18n="labAIDesc">Pusat riset machine learning, deep learning, computer vision, NLP, dan pengembangan sistem kecerdasan buatan berbasis data.</p>
<div class="flex flex-wrap gap-2 pt-5 border-t border-slate-50">
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">TensorFlow</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">PyTorch</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">OpenCV</span>
<span class="text-[10px] font-mono font-bold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-100 group-hover:text-untan-blue transition-colors">Jupyter</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-slate-50 relative py-16 sm:py-20 md:py-24 lg:py-28 xl:py-28 border-t border-slate-100 reveal" id="cta-section">
<div class="max-w-4xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 text-center">
<div
class="inline-flex items-center justify-center w-20 h-20 sm:w-20 md:w-24 lg:w-24 xl:w-24 sm:h-20 md:h-24 lg:h-24 xl:h-24 rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl bg-white text-untan-navy mb-8 sm:mb-10 md:mb-12 lg:mb-12 xl:mb-12 shadow-soft rotate-3 hover:rotate-0 transition-transform duration-500">
<i class="fa-solid fa-handshake-angle text-3xl sm:text-3xl md:text-4xl lg:text-4xl xl:text-4xl"></i>
</div>
<h3 class="text-2xl sm:text-2.5xl md:text-3xl lg:text-4xl xl:text-5xl font-bold text-untan-navy mb-5 sm:mb-6 md:mb-8 lg:mb-8 xl:mb-8 font-condensed tracking-tight"
data-i18n="ctaTitle">Tertarik Berkolaborasi dengan KBK Kami?</h3>
<p class="text-slate-500 mb-10 sm:mb-12 md:mb-14 lg:mb-14 xl:mb-14 text-xs sm:text-sm md:text-base lg:text-lg xl:text-lg leading-relaxed px-2 sm:px-4 md:px-6 lg:px-8 xl:px-10 opacity-80" data-i18n="ctaDesc">
Kami membuka peluang kerja sama riset lintas institusi, kemitraan strategis dengan industri, serta
riset mahasiswa (skripsi/tesis) di bawah supervisi ahli kami.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-5 md:gap-6 lg:gap-6 xl:gap-6">
<a href="mailto:info@informatika.untan.ac.id"
class="group inline-flex items-center justify-center gap-3 px-10 sm:px-12 md:px-14 lg:px-14 xl:px-14 py-3 sm:py-4 md:py-5 lg:py-5 xl:py-5 text-base sm:text-lg md:text-lg lg:text-lg xl:text-lg font-bold text-untan-navy transition-all bg-untan-yellow rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl shadow-soft hover:bg-yellow-400 hover:-translate-y-1 active:scale-95">
<i class="fa-solid fa-envelope text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl group-hover:animate-bounce"></i>
<span data-i18n="ctaBtn">Hubungi Kami</span>
</a>
<a href="https://informatika.untan.ac.id/people-based-on-kk.html"
class="inline-flex items-center justify-center gap-3 px-10 sm:px-11 md:px-12 lg:px-12 xl:px-12 py-3 sm:py-4 md:py-5 lg:py-5 xl:py-5 text-base sm:text-lg md:text-lg lg:text-lg xl:text-lg font-bold text-slate-600 transition-all bg-white border border-slate-200 rounded-xl sm:rounded-xl md:rounded-2xl lg:rounded-2xl xl:rounded-2xl shadow-soft hover:bg-slate-50 hover:border-slate-300">
<span data-i18n="facultyDirectory">Direktori Dosen</span>
</a>
</div>
</div>
</section>
</main>
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
<!-- Footer -->
<footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
<div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
<h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
Ikuti Kami</h3>
<div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-instagram text-xl sm:text-2xl"></i></a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-youtube text-xl sm:text-2xl"></i></a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-twitter text-xl sm:text-2xl"></i></a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
class="text-white hover:text-untan-yellow transition-colors"><i
class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
<div
class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
<h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
<h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
UNIVERSITAS TANJUNGPURA</h2>
</div>
</div>
<div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
<p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
</p>
<p>Kota Pontianak, Kalimantan Barat 78124</p>
</div>
<div
class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
<span>E: info@informatika.untan.ac.id</span>
<span class="hidden sm:inline opacity-50">|</span>
<span>P: +62 851-7165-5161</span>
<span class="hidden sm:inline opacity-50">|</span>
<span>F: +62(561) 739637</span>
<span class="hidden sm:inline opacity-50">|</span>
<span>WA: +62 851-7165-5161</span>
</div>
</div>
<div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
<img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
style="object-position: bottom;">
</div>
</footer>
<!-- Data Shared -->
<!-- JavaScript untuk Logic Bilingual, Data Dummy, dan Filtering -->
<script>
let risetData = []; // Akan diisi dari data dashboard
const dosenData = {
ai: [
{ initials: 'T', name: 'Tursina, S.T.,M.Cs.', nip: '197205102005011002', expertise: 'Machine Learning, Deep Learning', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
{ initials: 'RH', name: 'Rina Hartati, Ph.D', nip: '197809142009012003', expertise: 'Computer Vision, NLP', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'MT', name: 'Dr. M. Taufik, M.T', nip: '197403062000031001', expertise: 'Algoritma Optimasi, AI', badge_id: 'Guru Besar', badge_en: 'Professor' },
{ initials: 'YR', name: 'Yusuf Rizky, M.Kom', nip: '198811072015041001', expertise: 'Data Mining, Fuzzy Logic', badge_id: 'Lektor', badge_en: 'Assistant Professor' }
],
algo: [
{ initials: 'IS', name: 'Dr. Irwan Syaiful, S.T., M.T.', nip: '197508252003121001', expertise: 'Algorithm Design, Complexity Analysis', badge_id: 'Guru Besar', badge_en: 'Professor' },
{ initials: 'WK', name: 'Wardani Kusuma, M.Kom', nip: '198704112016042001', expertise: 'Data Structures, Graph Theory', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'RP', name: 'Rachmat Purba, M.Sc', nip: '198806202015041002', expertise: 'Dynamic Programming, Optimization', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'LS', name: 'Liza Surya, M.Kom', nip: '199003142018031001', expertise: 'Competitive Programming, Algorithms', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
],
rpl: [
{ initials: 'HA', name: 'H. Hengky Anra, S.T., M.Kom.', nip: '197602142003121001', expertise: 'Software Testing, DevOps', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
{ initials: 'PN', name: 'Putri Nabila, M.Kom', nip: '199005132017042001', expertise: 'UX Research, Agile', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' },
{ initials: 'YS', name: 'Dr. Yudha Santosa, M.T', nip: '197801152003121002', expertise: 'Cloud Engineering, SRE', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'BW', name: 'Bayu Wicaksono, M.Kom', nip: '198706122015041002', expertise: 'Mobile Dev, React Native', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
],
net: [
{ initials: 'HP', name: 'Heri Priyanto, S.T., M.T.', nip: '197604212003121001', expertise: 'Network Security, Cloud', badge_id: 'Guru Besar', badge_en: 'Professor' },
{ initials: 'SA', name: 'Siti Aisyah, M.Kom', nip: '198912082016042001', expertise: 'Cybersecurity, Forensik', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'BK', name: 'Budi Kurniawan, M.T', nip: '198204062009121001', expertise: 'IoT, Wireless Sensor', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'HM', name: 'Hamid Maulana, M.T', nip: '198507162012121001', expertise: 'Network Admin, SDN', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
],
si: [
{ initials: 'YS', name: 'Dr. Ir. Yus Sholva, S.T., M.T.', nip: '197809252004012001', expertise: 'GIS, Geospatial Analytics', badge_id: 'Lektor Kepala', badge_en: 'Associate Professor' },
{ initials: 'FN', name: 'Fadli Nugraha, M.Sc', nip: '198512072012121001', expertise: 'Data Science, BI', badge_id: 'Lektor', badge_en: 'Assistant Professor' },
{ initials: 'TH', name: 'Dr. Tria Hastuti, M.T', nip: '197711132003122001', expertise: 'E-Government, MIS', badge_id: 'Guru Besar', badge_en: 'Professor' },
{ initials: 'KS', name: 'Krisna Santoso, M.Kom', nip: '199201212018031001', expertise: 'Big Data, ETL', badge_id: 'Asisten Ahli', badge_en: 'Junior Lecturer' }
]
};
const kbkMeta = {
ai: {
label_id: 'Kecerdasan Buatan',
label_en: 'Artificial Intelligence',
accent: 'from-sky-500/15 to-cyan-400/10',
icon: 'fa-solid fa-brain',
insightBadge_id: 'KBK Insight',
insightBadge_en: 'KBK Insight',
insightDesc_id: 'KBK ini berfokus pada pengembangan sistem cerdas yang mampu memahami pola, bahasa, citra, dan pengambilan keputusan adaptif.',
insightDesc_en: 'This group focuses on intelligent systems that can understand patterns, language, images, and adaptive decision making.',
focus_id: 'Eksplorasi machine learning, deep learning, NLP, dan computer vision untuk menjawab problem nyata lintas sektor.',
focus_en: 'Explores machine learning, deep learning, NLP, and computer vision to address practical cross-sector problems.',
output_id: 'Luaran utama berupa model prediktif, prototipe sistem cerdas, dataset terkurasi, dan publikasi berbasis eksperimen.',
output_en: 'Primary outputs include predictive models, intelligent system prototypes, curated datasets, and experiment-driven publications.',
collab_id: 'Cocok untuk kolaborasi pada analitik data, otomasi proses, klasifikasi citra, dan pengolahan bahasa Indonesia.',
collab_en: 'Suitable for collaborations in data analytics, process automation, image classification, and Indonesian language processing.',
topics: ['Vision', 'NLP', 'Deep Learning', 'Data Mining']
},
algo: {
label_id: 'Algoritma Pemrograman',
label_en: 'Programming & Algorithms',
accent: 'from-purple-500/15 to-pink-400/10',
icon: 'fa-solid fa-code-branch',
insightBadge_id: 'KBK Insight',
insightBadge_en: 'KBK Insight',
insightDesc_id: 'KBK ini berfokus pada desain algoritma efisien, analisis kompleksitas, struktur data, dan optimasi performa kode.',
insightDesc_en: 'This group focuses on efficient algorithm design, complexity analysis, data structures, and code performance optimization.',
focus_id: 'Eksplorasi paradigma pemrograman, algoritma greedy, dynamic programming, graph algorithms, dan competitive programming.',
focus_en: 'Explores programming paradigms, greedy algorithms, dynamic programming, graph algorithms, and competitive programming.',
output_id: 'Luaran berupa library algoritma, tool analisis kompleksitas, dokumentasi best practices, dan publikasi penelitian algoritmik.',
output_en: 'Outputs include algorithm libraries, complexity analysis tools, best practice documentation, and algorithmic research publications.',
collab_id: 'Cocok untuk optimasi sistem, analisis performa aplikasi, pengembangan competitive programming, dan research komputasi.',
collab_en: 'Suitable for system optimization, application performance analysis, competitive programming development, and computational research.',
topics: ['Algorithms', 'Data Structures', 'Complexity', 'Optimization']
},
rpl: {
label_id: 'Rekayasa PL',
label_en: 'Software Engineering',
accent: 'from-amber-400/20 to-orange-400/10',
icon: 'fa-solid fa-code',
insightBadge_id: 'KBK Insight',
insightBadge_en: 'KBK Insight',
insightDesc_id: 'KBK ini menggarap proses rekayasa perangkat lunak dari perancangan, implementasi, pengujian, hingga keberlanjutan sistem.',
insightDesc_en: 'This group works across the full software engineering lifecycle from design and implementation to testing and system sustainability.',
focus_id: 'Fokus pada arsitektur modern, kualitas perangkat lunak, DevOps, pengujian, serta pengalaman pengguna yang terukur.',
focus_en: 'Focuses on modern architecture, software quality, DevOps, testing, and measurable user experience.',
output_id: 'Luaran berupa aplikasi siap pakai, pipeline CI/CD, framework pengujian, dokumentasi teknis, dan studi evaluasi kualitas.',
output_en: 'Outputs include production-ready applications, CI/CD pipelines, testing frameworks, technical documentation, and quality evaluation studies.',
collab_id: 'Relevan untuk pengembangan platform digital, audit kualitas aplikasi, transformasi proses bisnis, dan modernisasi sistem lama.',
collab_en: 'Relevant for digital platform development, application quality audits, business process transformation, and legacy modernization.',
topics: ['DevOps', 'Agile', 'Testing', 'Architecture']
},
net: {
label_id: 'Jaringan & Keamanan',
label_en: 'Network & Security',
accent: 'from-emerald-500/15 to-teal-400/10',
icon: 'fa-solid fa-shield-halved',
insightBadge_id: 'KBK Insight',
insightBadge_en: 'KBK Insight',
insightDesc_id: 'KBK ini menitikberatkan pada infrastruktur jaringan yang tangguh, aman, dan siap mendukung layanan digital berskala besar.',
insightDesc_en: 'This group emphasizes resilient, secure network infrastructure ready to support large-scale digital services.',
focus_id: 'Riset mencakup keamanan siber, cloud, IoT, monitoring jaringan, forensik digital, dan desain arsitektur terpercaya.',
focus_en: 'Research spans cybersecurity, cloud, IoT, network monitoring, digital forensics, and trusted architecture design.',
output_id: 'Luaran berupa rancangan arsitektur, sistem monitoring, simulasi keamanan, dashboard operasional, dan rekomendasi mitigasi risiko.',
output_en: 'Outputs include architecture blueprints, monitoring systems, security simulations, operational dashboards, and risk mitigation recommendations.',
collab_id: 'Tepat untuk kerja sama pada audit keamanan, monitoring infrastruktur, smart device, dan penerapan zero trust.',
collab_en: 'Well suited for partnerships in security audits, infrastructure monitoring, smart devices, and zero-trust adoption.',
topics: ['Cybersec', 'IoT', 'Cloud', 'Forensics']
},
si: {
label_id: 'Sistem Informasi',
label_en: 'Information Systems',
accent: 'from-indigo-500/15 to-blue-400/10',
icon: 'fa-solid fa-database',
insightBadge_id: 'KBK Insight',
insightBadge_en: 'KBK Insight',
insightDesc_id: 'KBK ini membangun solusi berbasis data untuk mendukung pengambilan keputusan, tata kelola informasi, dan pemetaan kebutuhan organisasi.',
insightDesc_en: 'This group builds data-driven solutions to support decision making, information governance, and organizational needs mapping.',
focus_id: 'Topik utama mencakup business intelligence, GIS, big data, data warehouse, dan sistem pendukung keputusan.',
focus_en: 'Its main topics include business intelligence, GIS, big data, data warehousing, and decision support systems.',
output_id: 'Luaran berupa dashboard analitik, model pelaporan, sistem berbasis geospasial, serta integrasi data untuk kebutuhan strategis.',
output_en: 'Outputs include analytics dashboards, reporting models, geospatial systems, and data integration for strategic needs.',
collab_id: 'Sangat relevan untuk proyek tata kelola data, pemetaan wilayah, evaluasi kebijakan, dan insight operasional lembaga.',
collab_en: 'Highly relevant for data governance projects, regional mapping, policy evaluation, and institutional operational insights.',
topics: ['Big Data', 'GIS', 'BI', 'Decision Support']
}
};
const rodaTranslations = {
id: {
info: 'INFO TERBARU',
tickerItem1: 'Selamat datang di antarmuka situs web Informatika terbaru!',
tickerItem2: 'Pendaftaran kolaborasi riset semester genap telah dibuka.',
tickerItem3: 'Pantau publikasi dosen dan mahasiswa secara real-time.',
home: 'BERANDA',
pageTitle: 'RISET & KBK',
badgeHero: 'Riset & Kelompok Bidang Keahlian',
heroTitle: 'Riset & Kelompok Bidang Keahlian',
heroDesc: 'Kenali Kelompok Bidang Keahlian (KBK) kami. Jelajahi riset unggulan dosen dan mahasiswa di bidang Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, hingga IoT',
quickActionKbk: 'Jelajahi KBK',
quickActionRiset: 'Cari Publikasi',
kbkTitle: '4 Pilar Keilmuan Informatika UNTAN',
kbkDesc: 'Setiap KBK berfokus pada topik riset spesifik, dipimpin dosen berpengalaman.',
kbkLeadLabel: 'Dipimpin oleh',
kbkFocusLabel: 'Arah Riset',
kbkOutputLabel: 'Luaran Utama',
kbkCollabLabel: 'Peluang Kolaborasi',
kbkTopicLabel: 'Topik Kunci',
statsPub: 'Hasil Penelitian',
statsSinta: 'Skor SINTA',
statsDosen: 'Dosen Homebase',
statsKolaborasi: 'Kerjasama Aktif',
statsMhs: 'Mahasiswa Aktif',
risetTitle: 'Publikasi & Penelitian Terkini',
searchLabel: 'Cari publikasi',
searchPlaceholder: 'Cari judul, penulis, atau venue...',
noResultTitle: 'Tidak ada publikasi yang cocok',
noResultDesc: 'Coba kata kunci lain atau ganti filter KBK.',
filterAll: 'Semua',
filterAI: 'Kecerdasan Buatan',
filterAlgo: 'Algoritma Pemrograman',
filterRPL: 'Rekayasa PL',
filterNet: 'Jaringan & Keamanan',
filterSI: 'Sistem Informasi',
dosenTitle: 'Peneliti & Dosen per Kelompok Keahlian',
dosenLeadDesc: 'Bagian ini menampilkan ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.',
kbkLeader: 'Ketua KBK',
viewMembers: 'Lihat dosen lainnya',
kbkAIDesc: 'Sistem cerdas berbasis AI, deep learning, vision, dan NLP untuk solusi nyata.',
kbkRPLDesc: 'Metodologi, arsitektur, dan kualitas perangkat lunak modern serta DevOps.',
kbkNetDesc: 'Infrastruktur jaringan handal, keamanan siber, dan teknologi Cloud/IoT.',
kbkSIDesc: 'Manajemen informasi, GIS, big data, dan sistem pendukung keputusan.',
labComputerDesc: 'Mendukung mata kuliah pemrograman dasar hingga lanjut, pengembangan aplikasi web, mobile, dan rekayasa perangkat lunak.',
labDataDesc: 'Mendukung pembelajaran basis data, pemodelan data, data warehousing, dan analitik data skala besar.',
labInfoDesc: 'Merancang arsitektur sistem informasi, memodelkan proses bisnis digital, serta menumbuhkan jiwa technopreneurship.',
labAIDesc: 'Pusat riset machine learning, deep learning, computer vision, NLP, dan pengembangan sistem kecerdasan buatan berbasis data.',
labNetDesc: 'Sarana praktik jaringan, konfigurasi router/switch, keamanan siber, administrasi sistem, dan pengembangan perangkat IoT.',
labTitle: 'Laboratorium Pendukung Riset',
ctaTitle: 'Tertarik Berkolaborasi dengan KBK Kami?',
ctaDesc: 'Kami terbuka untuk kolaborasi riset, kemitraan industri, maupun skripsi bersama dosen ahli kami.',
ctaBtn: 'Hubungi Kami',
viewAll: 'Lihat Semua',
facultyDirectory: 'Direktori Dosen',
expertise: 'Keahlian',
lastUpdatedText: 'Halaman ini terakhir diperbarui pada: ',
showingRiset: 'Tampilkan',
showingPubs: 'Menampilkan {0} dari {1} publikasi',
labDesc: '5 laboratorium modern dengan 93 unit PC All-in-One yang mendukung kegiatan riset strategis dan pengembangan teknologi dosen serta mahasiswa.',
labKom: 'Lab Komputer & Pemrograman',
labNet: 'Lab Jaringan, Keamanan & IoT',
labData: 'Lab Rekayasa PL & Data',
labSI: 'Lab Teknologi & Sistem Informasi',
labAI: 'Lab Komputasi & Kecerdasan Buatan',
mhs: 'Mahasiswa'
},
en: {
info: 'LATEST INFO',
tickerItem1: 'Welcome to the new Informatics website interface!',
tickerItem2: 'Research collaboration registration for this semester is open.',
tickerItem3: 'Track faculty and student publications in one place.',
home: 'HOME',
pageTitle: 'RESEARCH & KBK',
badgeHero: 'Research & Research Groups',
heroTitle: 'Research & Research Groups',
heroDesc: 'Get to know our Research Groups (KBK). Explore leading research by faculty and students in the fields of AI, Software Engineering, and IoT.',
quickActionKbk: 'Explore KBK',
quickActionRiset: 'Search Publications',
kbkTitle: '4 Pillars of Informatics Science at UNTAN',
kbkDesc: 'Each group focuses on specific research topics, led by experienced faculty.',
kbkLeadLabel: 'Led by',
kbkFocusLabel: 'Research Direction',
kbkOutputLabel: 'Primary Outputs',
kbkCollabLabel: 'Collaboration Potential',
kbkTopicLabel: 'Key Topics',
statsPub: 'Research Output',
statsSinta: 'SINTA Score',
statsDosen: 'Faculty Members',
statsKolaborasi: 'Active Partnerships',
statsMhs: 'Active Students',
risetTitle: 'Latest Publications & Research',
searchLabel: 'Search publications',
searchPlaceholder: 'Search by title, author, or venue...',
noResultTitle: 'No matching publications found',
noResultDesc: 'Try another keyword or switch KBK filter.',
filterAll: 'All',
filterAI: 'Artificial Intelligence',
filterAlgo: 'Programming & Algorithms',
filterRPL: 'Software Engineering',
filterNet: 'Network & Security',
filterSI: 'Information Systems',
dosenTitle: 'Faculty & Researchers by Research Group',
dosenLeadDesc: 'This section shows the head of each research group. Open a card to view the other faculty members in that group.',
kbkLeader: 'Head of KBK',
viewMembers: 'View other faculty',
kbkAIDesc: 'AI-based intelligent systems, deep learning, computer vision, and NLP for real-world solutions.',
kbkRPLDesc: 'Methodology, architecture, and quality of modern software and DevOps.',
kbkNetDesc: 'Reliable network infrastructure, cybersecurity, and Cloud/IoT technology.',
kbkSIDesc: 'Information management, GIS, big data, and decision support systems.',
labComputerDesc: 'Support for basic to advanced programming courses, web application development, mobile, and software engineering.',
labDataDesc: 'Support for database learning, data modeling, data warehousing, and large-scale data analytics.',
labInfoDesc: 'Design information system architecture, model digital business processes, and foster entrepreneurship spirit.',
labAIDesc: 'Center for machine learning, deep learning, computer vision, NLP research, and data-driven AI system development.',
labNetDesc: 'Network practice facilities, router/switch configuration, cybersecurity, system administration, and IoT device development.',
labTitle: 'Research Support Laboratories',
ctaTitle: 'Interested in Collaborating with Us?',
ctaDesc: 'We are open to research collaborations, industry partnerships, or thesis projects with our experts.',
ctaBtn: 'Contact Us',
viewAll: 'View All',
facultyDirectory: 'Faculty Directory',
expertise: 'Expertise',
lastUpdatedText: 'This page was last updated on: ',
showingRiset: 'Showing',
showingPubs: 'Showing {0} of {1} publications',
labDesc: '5 modern laboratories with 93 All-in-One PCs supporting strategic research and technological development for faculty and students.',
labKom: 'Computer & Programming Lab',
labNet: 'Networking, Security & IoT Lab',
labData: 'Software & Data Engineering Lab',
labSI: 'Information Technology & Systems Lab',
labAI: 'Computing & Artificial Intelligence Lab',
mhs: 'Student'
}
};
let currentFilter = 'all';
let currentQuery = '';
let currentKbkInsight = 'ai';
let isLoadingData = true;
let displayLimit = 9; // Default limit
const KBK_KEYWORDS = {
ai: ['kecerdasan', 'artificial', 'intelligence', 'neural', 'cnn', 'rnn', 'deep', 'machine', 'vision', 'nlp', 'genetika', 'optimasi', 'mining', 'pakar', 'heurisitik'],
algo: ['algoritma', 'algorithm', 'pemrograman', 'programming', 'structure', 'data structure', 'sorting', 'searching', 'complexity', 'kompleksitas'],
rpl: ['perangkat lunak', 'software', 'microservices', 'devops', 'testing', 'agile', 'scrum', 'framework', 'ux', 'mobile', 'react', 'kualitas', 'arsitektur'],
net: ['jaringan', 'network', 'cloud', 'iot', 'internet', 'things', 'security', 'keamanan', 'cyber', 'zero trust', 'wireless', 'sensor', 'routing', 'switching'],
si: ['sistem informasi', 'information systems', 'gis', 'geospatial', 'big data', 'bi', 'business', 'warehouse', 'mis', 'government', 'spk', 'keputusan', 'tata kelola']
};
function categorizeByKeywords(title) {
const lowTitle = title.toLowerCase();
for (const [kbk, keywords] of Object.entries(KBK_KEYWORDS)) {
if (keywords.some(k => lowTitle.includes(k))) return kbk;
}
return 'si'; // Default to SI if no match
}
function logAppError(scope, error, extra = {}) {
if (window.APP_CONFIG?.debugLogs !== true) return;
console.error(`[${scope}]`, error, extra);
}
function getDashboardErrorMessage(error) {
if (!error) return 'Terjadi kendala yang tidak diketahui saat memuat data.';
if (error.name === 'AbortError') return 'Koneksi ke dashboard terlalu lambat (timeout).';
if (error.message === 'INVALID_CONFIG') return 'Konfigurasi API belum lengkap. Periksa file .env dan jalankan lewat server lokal.';
if (error.message === 'INVALID_RESPONSE') return 'Respons dari proxy tidak valid dan tidak bisa diproses.';
if (error.message === 'EMPTY_RESPONSE') return 'Dashboard mengembalikan data kosong atau struktur halaman berubah.';
if (error.message === 'NO_ROWS_FOUND') return 'Data penelitian tidak ditemukan pada halaman dashboard.';
if (error.message === 'DASHBOARD_PROXY_NOT_CONFIGURED') return 'Proxy dashboard belum dikonfigurasi.';
if (error.message === 'DASHBOARD_RUNTIME_FETCH_DISABLED') return 'Data publikasi belum tersedia pada build ini.';
if (error.message?.startsWith('HTTP_ERROR_')) return `Proxy merespons gagal (${error.message.replace('HTTP_ERROR_', 'HTTP ')}).`;
return 'Gagal mengambil data. Server dashboard mungkin sedang sibuk atau memblokir akses.';
}
function renderRisetFeedback(title, message, buttonLabel = '', buttonAction = '') {
const grid = document.getElementById('riset-grid');
if (!grid) return;
const actionHtml = buttonLabel && buttonAction
? `<button onclick="${buttonAction}" class="px-6 py-2 bg-red-500 text-white rounded-xl font-bold text-sm hover:bg-red-600 transition-colors">${buttonLabel}</button>`
: '';
grid.innerHTML = `
<div class="md:col-span-2 lg:col-span-3 bg-red-50 border border-red-100 rounded-3xl p-12 text-center">
<div class="w-14 h-14 rounded-2xl bg-white text-red-500 mx-auto mb-4 flex items-center justify-center shadow-soft">
<i class="fa-solid fa-triangle-exclamation text-lg"></i>
</div>
<h3 class="text-lg font-bold text-red-900 mb-2">${title}</h3>
<p class="text-red-700 text-sm mb-4">${message}</p>
${actionHtml}
</div>
`;
}
function extractDashboardHtml(responseData) {
if (!responseData || !responseData.trim()) {
throw new Error('EMPTY_RESPONSE');
}
if (!responseData.trim().startsWith('{')) {
return responseData;
}
try {
const json = JSON.parse(responseData);
if (typeof json.contents === 'string' && json.contents.trim()) {
return json.contents;
}
} catch (error) {
throw new Error('INVALID_RESPONSE');
}
throw new Error('INVALID_RESPONSE');
}
function parseDashboardRows(html) {
if (!html || html.length < 500) {
throw new Error('EMPTY_RESPONSE');
}
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const rows = doc.querySelectorAll('table tbody tr');
if (!rows.length) {
throw new Error('NO_ROWS_FOUND');
}
return rows;
}
function shouldUseLocalDashboardProxy() {
const hostname = window.location.hostname;
return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '';
}
function isDashboardRuntimeFetchAllowed() {
const mode = window.APP_CONFIG?.dashboardRuntimeFetch;
return mode === true || mode === 'always' || (mode === 'local' && shouldUseLocalDashboardProxy());
}
function readEmbeddedDashboardHtml() {
const source = document.getElementById('roda-dashboard-html');
if (!source) return '';
try {
return JSON.parse(source.textContent || '""') || '';
} catch (error) {
return source.textContent || '';
}
}
function applyDashboardRows(rows) {
const newData = [];
rows.forEach((row) => {
const cols = row.querySelectorAll('td');
if (cols.length >= 3) {
const indexVal = cols[0].innerText.trim();
// Mencari elemen judul (biasanya di dalam <a> atau <b>)
const linkEl = cols[1].querySelector('a');
const titleEl = linkEl || cols[1].querySelector('b') || cols[1];
const url = linkEl ? linkEl.getAttribute('href') : '#';
const title = titleEl.innerText.trim();
// Skip jika baris ini adalah header atau bukan data penelitian (berdasarkan index atau judul)
if (isNaN(parseInt(indexVal)) || title === "Bidang Riset" || title === "Thn Jlh") {
return;
}
// Mencari elemen penulis (biasanya di dalam tag <font> dengan size 11px)
const authorsEl = cols[1].querySelector('font');
const authors = authorsEl ? authorsEl.innerText.trim() : 'Peneliti Informatika';
// Tahun biasanya ada di kolom berikutnya
const year = cols[2]?.innerText.trim() || '2025';
const kbk = categorizeByKeywords(title);
const kbkInfo = kbkMeta[kbk];
newData.push({
id: parseInt(indexVal) || (newData.length + 1),
kbk: kbk,
title_id: title,
title_en: title,
authors: authors,
year: year,
url: url,
venue: 'Dashboard Informatika',
badge_id: kbkInfo.label_id,
badge_en: kbkInfo.label_en
});
}
});
if (!newData.length) {
throw new Error('NO_ROWS_FOUND');
}
risetData = newData;
isLoadingData = false;
renderRisetCards();
updateStatPub(newData.length);
}
async function fetchDashboardData() {
const grid = document.getElementById('riset-grid');
if (grid) {
grid.innerHTML = `
<div class="md:col-span-2 lg:col-span-3 py-20 text-center">
<div class="inline-block animate-spin w-10 h-10 border-4 border-untan-blue border-t-transparent rounded-full mb-4"></div>
<p class="text-slate-500 font-bold">Mengambil data dari Dashboard...</p>
</div>
`;
}
let lastError = null;
const embeddedHtml = readEmbeddedDashboardHtml();
if (embeddedHtml) {
try {
applyDashboardRows(parseDashboardRows(embeddedHtml));
return;
} catch (error) {
lastError = error;
}
}
if (!isDashboardRuntimeFetchAllowed()) {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError || new Error('DASHBOARD_RUNTIME_FETCH_DISABLED')), 'Coba Lagi', 'fetchDashboardData()');
return;
}
const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
: [];
// Endpoint server.js hanya ada saat development lokal.
const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
// Deployment static memakai proxy publik karena tidak menjalankan server.js.
if (targetUrl) {
proxyTemplates.forEach((template) => {
proxyServers.push((url) => template
.replaceAll('{{url}}', encodeURIComponent(url))
.replaceAll('{{rawUrl}}', url)
.replaceAll('{{ts}}', String(Date.now())));
});
}
if (!proxyServers.length) {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
return;
}
for (const getProxyUrl of proxyServers) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000);
try {
const proxyUrl = getProxyUrl(targetUrl);
const response = await fetch(proxyUrl, { signal: controller.signal });
clearTimeout(timeoutId);
if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
const responseData = await response.text();
const html = extractDashboardHtml(responseData);
const rows = parseDashboardRows(html);
applyDashboardRows(rows);
return; // Berhasil! Keluar dari loop
} catch (error) {
clearTimeout(timeoutId);
lastError = error;
// Lanjut ke proxy berikutnya...
}
}
// Jika semua proxy gagal
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError), 'Coba Lagi', 'fetchDashboardData()');
}
// Global localization.js handles translations and language toggle
function matchesQuery(item, query) {
const haystack = [item.title_id, item.title_en, item.authors, item.venue, item.year].join(' ').toLowerCase();
return haystack.includes(query);
}
function renderRisetCards() {
const grid = document.getElementById('riset-grid');
if (!grid) return;
try {
const normalizedQuery = currentQuery.trim().toLowerCase();
const filteredByCategory = currentFilter === 'all' ? risetData : risetData.filter((item) => item.kbk === currentFilter);
const filteredItems = normalizedQuery ? filteredByCategory.filter((item) => matchesQuery(item, normalizedQuery)) : filteredByCategory;
// Terapkan limit tampilan
const itemsToShow = filteredItems.slice(0, displayLimit);
// Update info jumlah data yang ditampilkan
const countInfo = document.getElementById('riset-count-info');
if (countInfo) {
const template = translations[currentLang].showingPubs || `Menampilkan {0} dari {1} publikasi`;
countInfo.innerText = template.replace('{0}', itemsToShow.length).replace('{1}', filteredItems.length);
}
// Tampilkan/Sembunyikan tombol "Lihat Semua" berdasarkan sisa data
const viewAllSection = document.getElementById('view-all-section');
if (viewAllSection) {
viewAllSection.style.display = filteredItems.length > displayLimit ? 'block' : 'none';
}
if (!itemsToShow.length) {
grid.innerHTML = `
<div class="md:col-span-2 lg:col-span-3 bg-slate-50 border border-slate-100 rounded-3xl p-12 text-center">
<div class="w-14 h-14 rounded-2xl bg-white text-untan-navy mx-auto mb-4 flex items-center justify-center shadow-soft">
<i class="fa-solid fa-magnifying-glass text-lg"></i>
</div>
<h3 class="text-lg font-bold text-untan-navy mb-2">${translations[currentLang].noResultTitle}</h3>
<p class="text-slate-500 text-sm">${translations[currentLang].noResultDesc}</p>
</div>
`;
return;
}
grid.innerHTML = itemsToShow.map((item) => `
<a href="${item.url}" target="_blank" class="bg-white rounded-3xl p-6 sm:p-8 shadow-soft border border-gray-100 flex flex-col h-full hover:shadow-soft-lg hover:border-untan-yellow transition-all duration-500 group">
<div class="mb-6">
<span class="inline-block max-w-full bg-untan-blue/5 text-untan-blue text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-wider leading-tight text-center border border-untan-blue/10">${currentLang === 'id' ? item.badge_id : item.badge_en}</span>
</div>
<h3 class="text-lg font-bold text-untan-navy mb-4 leading-snug line-clamp-3 group-hover:text-untan-blue transition-colors">${currentLang === 'id' ? item.title_id : item.title_en}</h3>
<p class="text-gray-500 text-xs mb-1 italic">${item.authors}</p>
<p class="text-gray-400 text-[10px] font-mono mb-8">${item.year}</p>
<div class="mt-auto pt-6 border-t border-gray-50 flex justify-between items-center text-slate-400">
<span class="text-[11px] font-medium line-clamp-1 italic">${item.venue}</span>
<i class="fa-regular fa-file-lines group-hover:text-untan-yellow transition-colors"></i>
</div>
</a>
`).join('');
} catch (error) {
logAppError('renderRisetCards', error);
renderRisetFeedback('Tampilan Publikasi Bermasalah', 'Terjadi kesalahan saat menampilkan daftar publikasi.', 'Muat Ulang Data', 'fetchDashboardData()');
}
}
function updateStatPub(count) {
const el = document.getElementById('stat-pub');
if (!el) return;
const rounded = count >= 400 ? '400+' : count >= 300 ? '300+' : count >= 200 ? '200+' : count + '+';
el.textContent = rounded;
}
function renderDosenCards() {
const grid = document.getElementById('dosen-grid');
if (!grid) return;
grid.innerHTML = Object.entries(dosenData).filter(([kbk]) => kbk !== 'algo').map(([kbk, members]) => {
const leader = members[0];
const meta = kbkMeta[kbk];
const label = currentLang === 'id' ? meta.label_id : meta.label_en;
const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
let kbk_id = '#kk-4';
if (kbk === 'ai') {
kbk_id = '#kk-1';
} else if (kbk === 'rpl') {
kbk_id = '#kk-3';
} else if (kbk === 'net') {
kbk_id = '#kk-2';
} else if (kbk === 'si') {
kbk_id = '#kk-4';
}
return `
<a href="https://informatika.untan.ac.id/people-based-on-kk.html${kbk_id}" class="group block rounded-2xl sm:rounded-2.5xl md:rounded-3xl lg:rounded-3xl xl:rounded-3xl overflow-hidden border border-slate-100 bg-white shadow-soft hover:-translate-y-2 hover:shadow-soft-lg transition-all duration-500"> <div class="p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 bg-gradient-to-br ${meta.accent} border-b border-slate-100">
<div class="flex items-start justify-between gap-3 sm:gap-4">
<div>
<span class="inline-flex items-center gap-1.5 text-[9px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-[0.22em] text-untan-blue/80">
<i class="${meta.icon}"></i>
${label}
</span>
<p class="mt-2 text-[9px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-[0.22em] text-slate-400">${translations[currentLang].kbkLeader}</p>
</div>
<div class="w-12 h-12 sm:w-12 md:w-14 lg:w-14 xl:w-14 sm:h-12 md:h-14 lg:h-14 xl:h-14 rounded-xl sm:rounded-xl md:rounded-2xl bg-untan-navy flex items-center justify-center text-white font-bold text-lg sm:text-lg md:text-xl lg:text-xl shadow-soft flex-shrink-0">${leader.initials}</div>
</div>
<h4 class="text-base sm:text-base md:text-lg lg:text-lg font-bold text-untan-navy leading-snug mt-5 sm:mt-5 md:mt-6">${leader.name}</h4>
<p class="mt-1.5 text-[9px] sm:text-[9px] md:text-[10px] font-mono text-slate-400">NIP ${leader.nip}</p>
</div>
<div class="p-5 sm:p-6 md:p-7 lg:p-8 xl:p-8 flex flex-col">
<p class="text-xs sm:text-xs md:text-sm text-slate-500 leading-relaxed">${translations[currentLang].expertise}: ${leader.expertise}</p>
<div class="mt-auto pt-5 sm:pt-6 flex items-end justify-between gap-3">
<span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
${rank.split(' ').join('<br>')}
</span>
<span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
${translations[currentLang].viewMembers}
<i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
</span>
</div>
</div>
</a>
`;
}).join('');
}
function renderKbkInsight() {
const meta = kbkMeta[currentKbkInsight];
const leader = dosenData[currentKbkInsight][0];
if (!meta || !leader) return;
const title = currentLang === 'id' ? meta.label_id : meta.label_en;
const badge = currentLang === 'id' ? meta.insightBadge_id : meta.insightBadge_en;
const desc = currentLang === 'id' ? meta.insightDesc_id : meta.insightDesc_en;
const focus = currentLang === 'id' ? meta.focus_id : meta.focus_en;
const output = currentLang === 'id' ? meta.output_id : meta.output_en;
const collab = currentLang === 'id' ? meta.collab_id : meta.collab_en;
const rank = currentLang === 'id' ? leader.badge_id : leader.badge_en;
const badgeEl = document.getElementById('kbk-insight-badge');
const iconEl = document.getElementById('kbk-insight-icon');
const titleEl = document.getElementById('kbk-insight-title');
const descEl = document.getElementById('kbk-insight-desc');
const leadLabelEl = document.getElementById('kbk-insight-lead-label');
const leadInitialsEl = document.getElementById('kbk-insight-lead-initials');
const leadNameEl = document.getElementById('kbk-insight-lead-name');
const leadRankEl = document.getElementById('kbk-insight-lead-rank');
const focusLabelEl = document.getElementById('kbk-focus-label');
const focusTextEl = document.getElementById('kbk-focus-text');
const outputLabelEl = document.getElementById('kbk-output-label');
const outputTextEl = document.getElementById('kbk-output-text');
const collabLabelEl = document.getElementById('kbk-collab-label');
const collabTextEl = document.getElementById('kbk-collab-text');
const topicLabelEl = document.getElementById('kbk-topic-label');
const topicTagsEl = document.getElementById('kbk-topic-tags');
const heroEl = document.getElementById('kbk-insight-hero');
if (!badgeEl || !iconEl || !titleEl || !descEl || !leadLabelEl || !leadInitialsEl || !leadNameEl || !leadRankEl || !focusLabelEl || !focusTextEl || !outputLabelEl || !outputTextEl || !collabLabelEl || !collabTextEl || !topicLabelEl || !topicTagsEl || !heroEl) return;
heroEl.className = `p-8 lg:p-10 border-b lg:border-b-0 lg:border-r border-slate-100 bg-gradient-to-br ${meta.accent}`;
iconEl.className = meta.icon;
badgeEl.textContent = badge;
titleEl.textContent = title;
descEl.textContent = desc;
leadLabelEl.textContent = translations[currentLang].kbkLeadLabel;
leadInitialsEl.textContent = leader.initials;
leadNameEl.textContent = leader.name;
leadRankEl.textContent = rank;
focusLabelEl.textContent = translations[currentLang].kbkFocusLabel;
focusTextEl.textContent = focus;
outputLabelEl.textContent = translations[currentLang].kbkOutputLabel;
outputTextEl.textContent = output;
collabLabelEl.textContent = translations[currentLang].kbkCollabLabel;
collabTextEl.textContent = collab;
topicLabelEl.textContent = translations[currentLang].kbkTopicLabel;
topicTagsEl.innerHTML = meta.topics.map((topic) => `
<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-[11px] font-bold text-slate-500">${topic}</span>
`).join('');
document.querySelectorAll('[data-kbk-card]').forEach((card) => {
const active = card.getAttribute('data-kbk-card') === currentKbkInsight;
card.classList.toggle('border-untan-yellow', active);
card.classList.toggle('ring-2', active);
card.classList.toggle('ring-untan-blue/10', active);
});
}
window.openKbkInsight = function (kbk, shouldScroll = true) {
if (!kbkMeta[kbk]) return;
currentKbkInsight = kbk;
renderKbkInsight();
if (shouldScroll) {
const section = document.getElementById('kbk-insight-section');
if (section) {
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
};
window.searchRiset = function (query) {
currentQuery = String(query || '').trim().toLowerCase();
const clearButton = document.getElementById('clear-riset-search');
if (clearButton) {
clearButton.classList.toggle('hidden', currentQuery.length === 0);
}
renderRisetCards();
};
window.filterRiset = function (category) {
currentFilter = category;
displayLimit = 9; // Reset limit saat ganti filter
document.querySelectorAll('.filter-btn').forEach((button) => {
const active = button.getAttribute('data-filter') === category;
button.className = `filter-btn px-5 py-2.5 rounded-lg font-bold text-[11px] uppercase tracking-wider transition-all ${active ? 'bg-untan-navy text-white shadow-soft' : 'text-slate-400 hover:bg-slate-100 hover:text-untan-navy'}`;
});
renderRisetCards();
};
window.setLimit = function (limit) {
displayLimit = limit;
renderRisetCards();
// Highlight active limit button
document.querySelectorAll('.limit-btn').forEach(btn => {
const isActive = parseInt(btn.getAttribute('data-limit')) === limit;
btn.className = `limit-btn px-4 py-2 rounded-xl text-[11px] font-bold transition-all ${isActive ? 'bg-untan-navy text-white shadow-soft' : 'bg-white text-slate-500 border border-slate-200 hover:bg-slate-50'}`;
});
};
function setupRevealAnimations() {
const revealElements = document.querySelectorAll('.reveal');
if (!revealElements.length) return;
document.body.classList.add('reveal-ready');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
revealElements.forEach((element) => element.classList.add('is-visible'));
return;
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
});
}, { threshold: 0.12 });
revealElements.forEach((element) => observer.observe(element));
}
document.addEventListener('languageChanged', (e) => {
currentLang = e.detail.lang;
renderKbkInsight();
renderRisetCards();
renderDosenCards();
const lastUpdatedEl = document.getElementById("last-updated");
if (lastUpdatedEl) {
lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(currentLang === 'id' ? 'id-ID' : 'en-US');
}
});
window.addEventListener('error', (event) => {
logAppError('window-error', event.error || new Error(event.message));
});
window.addEventListener('unhandledrejection', (event) => {
logAppError('unhandledrejection', event.reason instanceof Error ? event.reason : new Error(String(event.reason)));
});
document.addEventListener('DOMContentLoaded', () => {
try {
// Handle responsive behavior using matchMedia for reliable breakpoint detection
function handleResponsive() {
// Use window.matchMedia for CSS breakpoint detection
const isLgOrLarger = window.matchMedia('(min-width: 1024px)').matches;
// Find yellow navbar (bg-[#feb401] hidden lg:block)
const navs = document.querySelectorAll('nav');
navs.forEach((nav) => {
const classes = nav.getAttribute('class') || '';
const isYellowNav = classes.includes('bg-[#feb401]');
if (isYellowNav) {
if (isLgOrLarger) {
nav.style.setProperty('display', 'block', 'important');
} else {
nav.style.display = 'none';
}
}
});
// Find right list (hidden lg:flex)
const rightList = document.querySelector('[class*="hidden"][class*="lg:flex"]');
if (rightList) {
const classes = rightList.getAttribute('class') || '';
const hasHidden = classes.includes('hidden');
const hasLgFlex = classes.includes('lg:flex');
if (hasHidden && hasLgFlex) {
if (isLgOrLarger) {
rightList.style.setProperty('display', 'flex', 'important');
} else {
rightList.style.display = 'none';
}
}
}
}
// Keep body padding-top in sync with the actual fixed navbar height
function syncNavHeight() {
const nav = document.getElementById('nav-wrapper');
if (!nav) return;
document.body.style.paddingTop = nav.offsetHeight + 'px';
}
// Listen for real CSS media query breakpoints
const mediaQueryList = window.matchMedia('(min-width: 1024px)');
mediaQueryList.addListener((e) => {
handleResponsive();
syncNavHeight();
});
handleResponsive();
syncNavHeight();
window.addEventListener('resize', syncNavHeight);
window.addEventListener('load', syncNavHeight);
document.querySelectorAll('#nav-wrapper img').forEach((img) => {
if (!img.complete) img.addEventListener('load', syncNavHeight);
});
setupRevealAnimations();
if (typeof translations !== 'undefined') {
Object.assign(translations.id, rodaTranslations.id);
Object.assign(translations.en, rodaTranslations.en);
if (typeof applyLang === 'function') applyLang();
} else {
currentLang = 'id';
renderKbkInsight();
renderRisetCards();
renderDosenCards();
}
openKbkInsight(currentKbkInsight, false);
filterRiset(currentFilter);
searchRiset('');
fetchDashboardData().catch((error) => {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(error), 'Coba Lagi', 'fetchDashboardData()');
});
} catch (error) {
logAppError('DOMContentLoaded', error);
renderRisetFeedback('Aplikasi Gagal Dimulai', 'Terjadi kesalahan saat inisialisasi halaman. Silakan muat ulang halaman.');
}
});
</script>
<script>
(function () {
const menuItems = document.querySelectorAll('[data-menu]');
const megaOverlay = document.getElementById('mega-overlay');
let activeMenu = null;
const menuMap = {
tentang: 'mega-tentang',
program: 'mega-program',
sdm: 'mega-sdm',
fasilitas: 'mega-fasilitas',
karya: 'mega-karya',
kontak: 'mega-kontak'
};
function setButtonState(menuId) {
menuItems.forEach(item => {
const isActive = item.getAttribute('data-menu') === menuId;
const btn = item.querySelector('.nav-menu-btn');
const chevron = item.querySelector('.fa-chevron-down');
btn.classList.toggle('active', isActive);
btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
if (chevron) chevron.style.transform = isActive ? 'rotate(180deg)' : '';
});
}
function closeMenus() {
Object.values(menuMap).forEach(panelId => {
const panel = document.getElementById(panelId);
if (panel) panel.classList.remove('active');
});
if (megaOverlay) megaOverlay.classList.remove('active');
setButtonState(null);
activeMenu = null;
}
function openMenu(menuId) {
const targetPanel = document.getElementById(menuMap[menuId]);
if (!targetPanel) return;
Object.values(menuMap).forEach(panelId => {
const panel = document.getElementById(panelId);
if (panel) panel.classList.remove('active');
});
targetPanel.classList.add('active');
if (megaOverlay) megaOverlay.classList.add('active');
setButtonState(menuId);
activeMenu = menuId;
}
menuItems.forEach(item => {
const menuId = item.getAttribute('data-menu');
const button = item.querySelector('.nav-menu-btn');
button.setAttribute('aria-haspopup', 'true');
button.setAttribute('aria-expanded', 'false');
button.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (activeMenu === menuId) {
closeMenus();
} else {
openMenu(menuId);
}
});
});
if (megaOverlay) {
megaOverlay.addEventListener('click', closeMenus);
}
document.addEventListener('click', (e) => {
const clickedInsideNav = e.target.closest('#main-nav');
const clickedInsidePanel = e.target.closest('.mega-panel');
if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
closeMenus();
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && activeMenu) {
closeMenus();
}
});
})();
</script>
<script>
(function() {
const mobileBtn = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMobileBtn= document.getElementById('close-mobile-menu');
if (mobileBtn && mobileMenu) {
mobileBtn.addEventListener('click', function() {
const isOpen = !mobileMenu.classList.contains('-translate-x-full');
mobileMenu.classList.toggle('-translate-x-full');
mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
});
}
if (closeMobileBtn && mobileMenu) {
closeMobileBtn.addEventListener('click', function() {
mobileMenu.classList.add('-translate-x-full');
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
});
}
})();
</script>
<script>
(function () {
const stats = [
{ id: 'stat-pub', target: 400, suffix: '+', decimals: 0 },
{ id: 'stat-sinta', target: 7555, suffix: '', decimals: 0, format: 'dot-thousands' },
{ id: 'stat-dosen', target: 33, suffix: '', decimals: 0 },
{ id: 'stat-collab', target: 10, suffix: '+', decimals: 0 },
{ id: 'stat-mhs', target: 518, suffix: '', decimals: 0 },
];
function easeOutQuart(t) {
return 1 - Math.pow(1 - t, 4);
}
function formatValue(value, fmt) {
if (fmt === 'dot-thousands') {
return Math.floor(value).toLocaleString('id-ID');
}
return Math.floor(value).toString();
}
function animateStat(el, target, suffix, fmt, duration) {
const start = performance.now();
function step(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const current = easeOutQuart(progress) * target;
el.textContent = formatValue(current, fmt) + suffix;
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
observer.unobserve(entry.target);
stats.forEach(function (s) {
const el = document.getElementById(s.id);
if (el) animateStat(el, s.target, s.suffix, s.format, 1800);
});
});
}, { threshold: 0.3 });
const section = document.querySelector('#stat-pub');
if (section) observer.observe(section.closest('section'));
})();
</script>
<script src="../../assets/global/localization.js"></script>
</body>
</html>
View Git Blame Copy Permalink