forked from izu/student-web-if-development-kit
Raditya_Indra_Putranto
2184 lines
158 KiB
HTML
2184 lines
158 KiB
HTML
<!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: 'local',
|
|
dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
|
|
dashboardProxyTemplates: [
|
|
'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
|
|
'https://api.codetabs.com/v1/proxy?quest={{url}}',
|
|
'https://thingproxy.freeboard.io/fetch/{{rawUrl}}'
|
|
]
|
|
};
|
|
</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 id="lang-toggle-btn"
|
|
class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
|
|
onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')">
|
|
<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-serif">Menu Utama</span>
|
|
<button id="lang-toggle-mobile"
|
|
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"
|
|
onclick="setLanguage(currentLang === 'id' ? 'en' : 'id')"
|
|
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-serif" 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-serif"
|
|
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-serif" 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-serif"
|
|
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-serif" 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-serif"
|
|
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
|
|
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 Mahasiswa
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<h4 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 — 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 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 — 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 Mahasiswa
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<h4 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 — 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 Mahasiswa
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<h4 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 — 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 Mahasiswa
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<h4 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 — 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 translations = {
|
|
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: ',
|
|
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.'
|
|
},
|
|
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: ',
|
|
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.'
|
|
}
|
|
};
|
|
|
|
let currentLang = 'id';
|
|
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()');
|
|
}
|
|
|
|
|
|
function updateLangButton() {
|
|
const desktopButton = document.getElementById('lang-toggle-btn');
|
|
if (desktopButton) {
|
|
desktopButton.innerHTML = currentLang === 'id'
|
|
? '<span class="font-bold text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-normal text-white">EN</span>'
|
|
: '<span class="font-normal text-white">ID</span> <span class="text-white/40 mx-2">|</span> <span class="font-bold text-white">EN</span>';
|
|
}
|
|
|
|
const mobileButton = document.getElementById('mobile-lang-toggle-btn');
|
|
if (mobileButton) {
|
|
mobileButton.textContent = currentLang === 'id' ? 'Bahasa: ID' : 'Language: EN';
|
|
}
|
|
}
|
|
|
|
function applyTranslation(lang) {
|
|
document.querySelectorAll('[data-i18n]').forEach((element) => {
|
|
const key = element.getAttribute('data-i18n');
|
|
if (translations[lang][key]) {
|
|
element.innerText = translations[lang][key];
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach((element) => {
|
|
const key = element.getAttribute('data-i18n-placeholder');
|
|
if (translations[lang][key]) {
|
|
element.setAttribute('placeholder', translations[lang][key]);
|
|
}
|
|
});
|
|
}
|
|
|
|
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;
|
|
|
|
return `
|
|
<a href="https://informatika.untan.ac.id/people-based-on-kk.html" 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));
|
|
}
|
|
|
|
window.setLanguage = function (lang) {
|
|
currentLang = lang;
|
|
updateLangButton();
|
|
applyTranslation(lang);
|
|
renderKbkInsight();
|
|
renderRisetCards();
|
|
renderDosenCards();
|
|
|
|
const lastUpdatedEl = document.getElementById("last-updated");
|
|
if (lastUpdatedEl) {
|
|
lastUpdatedEl.innerHTML = new Date(document.lastModified).toLocaleString(lang === '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();
|
|
setLanguage(currentLang);
|
|
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>
|
|
</body>
|
|
|
|
</html>
|