Araya/student-web-if-development-kit
2
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity
Files
c103c837eaf55fe6641b930e78e37c85c356922f
student-web-if-development-kit/groups/Jellyfish.Corp/index.html
T
miaaurl 0768a9c04a feat: tambah isi konten keseluruhan
2026-06-04 20:09:31 +07:00

2158 lines
137 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Group 01 &ndash; Jellyfish.Corp | Informatika UNTAN</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../../assets/global/output.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ===== MOBILE NAV STABILITY FIX =====
Prevents logo bar from collapsing/shifting on Android when
address bar hides/shows and triggers viewport reflow.
===================================== */
#nav-wrapper {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 50;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: box-shadow;
}
#nav-wrapper>div:first-child {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
@media (max-width: 1023px) {
#nav-wrapper>div:first-child {
min-height: 0 !important;
max-height: none;
}
}
#pengumuman-bar {
z-index: 40;
}
#pengumuman-bar.is-stuck {
position: fixed;
left: 0;
right: 0;
z-index: 40;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Skip Link Styling */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #003150;
color: white;
padding: 8px 16px;
z-index: 100;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
/* Focus visible for better keyboard navigation */
:focus-visible {
outline: 3px solid #feb401;
outline-offset: 2px;
}
/* Mega Menu Styles */
.hero-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
display: inline-block;
margin: 0 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.hero-pagination .swiper-pagination-bullet-active {
background: rgba(255, 255, 255, 1);
width: 24px;
border-radius: 4px;
}
.mega-panel {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
position: absolute;
top: 100%;
left: 0;
right: 0;
}
.mega-panel.active {
opacity: 1;
visibility: visible;
}
/* Overlay transition */
#mega-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
#mega-overlay.active {
opacity: 1;
visibility: visible;
}
.mega-link-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background: white;
transition: all 0.2s ease;
}
.mega-link-card:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
transform: translateY(-2px);
}
.mega-link-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.nav-menu-btn.active {
background: rgba(255, 255, 255, 0.9);
color: #1e40af;
}
.nav-menu-btn:hover {
background: rgba(255, 255, 255, 0.8);
}
/* Mega menu positioning - no gap */
#main-nav {
position: relative;
}
#mega-menu-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
pointer-events: none;
}
#mega-menu-container .mega-panel {
pointer-events: auto;
}
/* Keep pointer bridge under nav to prevent hover loss */
.nav-menu-item {
position: relative;
}
.nav-menu-item::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 12px;
}
/* ===== Luco Chatbot Animations ===== */
@keyframes slideInRight {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes lucoPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
#luco-container {
animation: slideInRight 0.5s ease-out forwards;
}
#luco-bubble {
animation: fadeInUp 0.3s ease-out forwards;
width: min(18rem, calc(100vw - 2rem));
}
#luco-btn {
animation: lucoPulse 2s ease-in-out infinite;
}
#luco-btn:hover {
animation: none;
}
/* Typing indicator */
.typing-indicator span {
display: inline-block;
animation: bounce 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) {
animation-delay: 0s;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
}
/* Luco speech bubble arrow */
#luco-bubble .bubble-arrow {
position: absolute;
right: 24px;
bottom: -6px;
width: 12px;
height: 12px;
background: white;
transform: rotate(45deg);
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
</style>
</head>
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
<div id="nav-wrapper"
class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
<div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
<div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
<div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
style="overflow:hidden;max-height:100%;">
01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
</div>
<div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
</div>
<div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
<a href="../../index.html" class="flex items-center gap-4 group">
<div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
</div>
<div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
<span
class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
<span
class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
TANJUNGPURA</span>
</div>
</a>
<div class="hidden lg:flex items-center gap-5">
<div class="flex items-center gap-3 text-sm">
<a href="https://satu.untan.ac.id" target="_blank"
class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
</div>
<div class="pl-5 border-l border-white/20 flex items-center gap-3">
<button
class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
<span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Pengaturan aksesibilitas"
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
<i class="fas fa-universal-access" aria-hidden="true"></i>
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Cari konten">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<button id="mobile-menu-button"
class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
</div>
<nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
aria-label="Menu navigasi utama">
<div class="container mx-auto px-6">
<div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">
<!-- Menu: Tentang Kami -->
<div class="nav-menu-item relative" data-menu="tentang">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_about">Tentang Kami</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Program -->
<div class="nav-menu-item relative" data-menu="program">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_program">Program</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: SDM -->
<div class="nav-menu-item relative" data-menu="sdm">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_sdm">SDM</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Fasilitas -->
<div class="nav-menu-item relative" data-menu="fasilitas">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_facilities">Fasilitas</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Karya & Agenda -->
<div class="nav-menu-item relative" data-menu="karya">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_works">Karya & Agenda</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
<!-- Menu: Kontak -->
<div class="nav-menu-item relative" data-menu="kontak">
<button
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
<span data-i18n="nav_contact">Kontak</span>
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
</button>
</div>
</div>
</div>
<!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
<div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">
<!-- Mega Menu: Tentang Kami -->
<div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
<div class="container mx-auto px-6 py-8">
<div class="grid grid-cols-12 gap-8">
<!-- Left: Featured -->
<div
class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
<div
class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16">
</div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12">
</div>
<div class="relative z-10">
<span
class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
data-i18n="mega_about_title">Tentang Kami</span>
<h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
<p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">
Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi
sejak 1993.</p>
<a href="content.html?type=berita"
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">
Selengkapnya <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Right: Links -->
<div class="col-span-8 grid grid-cols-2 gap-6">
<a href="content.html?type=berita" class="mega-link-card group">
<div
class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
<i class="fas fa-landmark"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
data-i18n="link_history">Sejarah & Tonggak</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan
panjang membangun generasi digital</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
<i class="fas fa-users"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
data-i18n="link_org">Struktur Organisasi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan
jajaran pengelola</p>
</div>
</a>
<a href="profil.html" class="mega-link-card group">
<div
class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white">
<i class="fas fa-bullseye"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
data-i18n="link_vision">Visi & Misi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan
tujuan pengembangan prodi</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div
class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white">
<i class="fas fa-handshake"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
data-i18n="link_partnership">Kerjasama & MoU</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_partnership_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-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-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20">
</div>
<div class="relative z-10">
<span
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4">Program
Akademik</span>
<h3 class="text-2xl font-bold mb-3" data-i18n="mega_program_obe">Kurikulum Berbasis
OBE</h3>
<p class="text-blue-100 text-sm mb-6 leading-relaxed">Outcome-Based Education dengan
4 jalur konsentrasi: AI, Software Engineering, Network, dan Information Systems.
</p>
<a href="subject-and-courses.html"
class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
data-i18n="btn_krs_sim">
<i class="fas fa-play-circle"></i> Simulasi KRS
</a>
</div>
</div>
<!-- Right: Links Grid -->
<div class="col-span-8">
<div class="grid grid-cols-3 gap-4">
<a href="subject-and-courses.html" 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-graduation-cap"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_academic">Akademik</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">
Jadwal, KRS, dan kalender</p>
</div>
</a>
<a href="content.html?type=berita" class="mega-link-card group">
<div
class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white">
<i class="fas fa-award"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_accreditation">Akreditasi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_accred_desc">Status
Unggul BAN-PT</p>
</div>
</a>
<a href="graduate-profile.html" class="mega-link-card group">
<div
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
<i class="fas fa-user-graduate"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
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-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white">
<i class="fas fa-book-open"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_courses">Mata Kuliah</h4>
<p class="text-xs text-slate-500 mt-1">144 SKS kurikulum</p>
</div>
</a>
<a href="academic-guidelines.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-file-alt"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_guideline">Panduan</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-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white">
<i class="fas fa-chart-bar"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_statistics">Informatika Angka</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_statistics_desc">
Statistik & data</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mega Menu: SDM -->
<div id="mega-sdm" 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 Dosen -->
<div
class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full">
</div>
<div class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full">
</div>
</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_sdm_title">Sumber Daya Manusia</span>
<h3 class="text-2xl font-bold mb-3" data-i18n="mega_sdm_desc">Tim Pengajar
Profesional</h3>
<p class="text-slate-300 text-sm mb-4 leading-relaxed">30+ dosen berkualifikasi
S2/S3 dari universitas terkemuka dalam dan luar negeri.</p>
<div class="flex gap-4 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-untan-yellow">15+</div>
<div class="text-[10px] text-slate-400 uppercase">Doktor</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-untan-yellow">20+</div>
<div class="text-[10px] text-slate-400 uppercase">Magister</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-untan-yellow">5</div>
<div class="text-[10px] text-slate-400 uppercase">Guru Besar</div>
</div>
</div>
<a href="people-based-on-kk.html"
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
data-i18n="btn_all_lecturers">
Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Right: KK Groups -->
<div class="col-span-7">
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
data-i18n="label_expertise">Kelompok Keahlian</h4>
<div class="grid grid-cols-2 gap-4">
<a href="people-based-on-kk.html"
class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
<i class="fas fa-brain"></i>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-1">KK Kecerdasan Buatan</h5>
<p class="text-xs text-slate-500">Machine Learning, Computer Vision, NLP
</p>
<span class="inline-block mt-2 text-xs text-purple-600 font-semibold">8
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
</div>
</div>
</a>
<a href="people-based-on-kk.html"
class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
<i class="fas fa-code"></i>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-1">KK Rekayasa Perangkat Lunak
</h5>
<p class="text-xs text-slate-500">Software Engineering, DevOps, Testing
</p>
<span class="inline-block mt-2 text-xs text-blue-600 font-semibold">10
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
</div>
</div>
</a>
<a href="people-based-on-kk.html"
class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
<i class="fas fa-network-wired"></i>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-1">KK Jaringan & Keamanan</h5>
<p class="text-xs text-slate-500">Network, Cybersecurity, Cloud</p>
<span class="inline-block mt-2 text-xs text-emerald-600 font-semibold">7
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
</div>
</div>
</a>
<a href="people-based-on-kk.html"
class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all">
<div class="flex items-start gap-4">
<div
class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
<i class="fas fa-database"></i>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-1">KK Sistem Informasi</h5>
<p class="text-xs text-slate-500">Data Science, GIS, Business Intel</p>
<span class="inline-block mt-2 text-xs text-orange-600 font-semibold">6
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Fasilitas -->
<div id="mega-fasilitas" 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-4 gap-6">
<a href="content.html?type=rubrik"
class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
</div>
<i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
<h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">Laboratorium</h4>
<p class="text-sm text-cyan-100 mb-4" data-i18n="mega_lab_desc">8 lab modern dengan
peralatan terkini</p>
<span
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
data-i18n="btn_explore">
Jelajahi <i class="fas fa-arrow-right"></i>
</span>
</a>
<a href="content.html?type=rubrik"
class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
</div>
<i class="fas fa-server text-4xl mb-4 opacity-80"></i>
<h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">Data Center</h4>
<p class="text-sm text-violet-100 mb-4" data-i18n="mega_dc_desc">Server & infrastruktur
cloud lokal</p>
<span
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
data-i18n="btn_explore">
Jelajahi <i class="fas fa-arrow-right"></i>
</span>
</a>
<a href="content.html?type=rubrik"
class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
</div>
<i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
<h4 class="text-lg font-bold mb-2" data-i18n="mega_eresources">E-Resources</h4>
<p class="text-sm text-emerald-100 mb-4" data-i18n="mega_eresources_desc">Akses jurnal &
database ilmiah</p>
<span
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
data-i18n="btn_explore">
Jelajahi <i class="fas fa-arrow-right"></i>
</span>
</a>
<a href="ifuntanhub.html"
class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
<div
class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12">
</div>
<i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
<h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
<p class="text-sm text-slate-300 mb-4" data-i18n="mega_hub_desc">Platform PaaS untuk
mahasiswa</p>
<span
class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all">
Launch <i class="fas fa-external-link-alt"></i>
</span>
</a>
</div>
</div>
</div>
<!-- Mega Menu: Karya & Agenda -->
<div id="mega-karya" 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: Research Highlight -->
<div class="col-span-5">
<div
class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4">
<span
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
data-i18n="mega_research_title">Riset Unggulan</span>
<h3 class="text-xl font-bold mb-2" data-i18n="mega_sinta_title">Indeks SINTA Terbaik
</h3>
<p class="text-amber-100 text-sm mb-4" data-i18n="mega_sinta_desc">Publikasi dosen
terindeks Scopus, WoS, dan jurnal nasional terakreditasi.</p>
<a href="content.html?type=berita"
class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
data-i18n="btn_publications">
Lihat Publikasi
</a>
</div>
<a href="content.html?type=berita"
class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all">
<div class="flex items-center gap-3">
<div
class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
<i class="fas fa-calendar-alt"></i>
</div>
<div>
<h5 class="font-bold text-slate-800 text-sm" data-i18n="link_info_agenda">
Info & Agenda</h5>
<p class="text-xs text-slate-500" data-i18n="link_info_agenda_desc">
Pengumuman dan jadwal kegiatan</p>
</div>
<i class="fas fa-chevron-right text-slate-400 ml-auto"></i>
</div>
</a>
</div>
<!-- Right: Grid -->
<div class="col-span-7 grid grid-cols-2 gap-4">
<a href="karya.html" 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-layer-group"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue">Semua Karya
</h4>
<p class="text-xs text-slate-500 mt-1">Lihat seluruh karya dalam satu halaman
</p>
</div>
</a>
<a href="karya.html?filter=penelitian" 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-microscope"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_research">Riset</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_research_desc">Penelitian
dosen dan mahasiswa</p>
</div>
</a>
<a href="karya.html?filter=pkm" class="mega-link-card group">
<div
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
<i class="fas fa-hands-helping"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_community">Pengabdian</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_community_desc">Program
pengabdian masyarakat</p>
</div>
</a>
<a href="content.html?type=rubrik" 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-trophy"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_achievements">Prestasi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_achievements_desc">
Pencapaian dosen & mahasiswa</p>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Mega Menu: Kontak -->
<div id="mega-kontak" 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: Contact Info -->
<div class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white">
<h3 class="text-xl font-bold mb-4" data-i18n="mega_contact_title">Hubungi Kami</h3>
<div class="space-y-4">
<div class="flex items-start gap-3">
<div
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
</div>
<div>
<p class="text-sm text-slate-300">Jl. Prof. Dr. H. Hadari Nawawi, Bansir
Laut, Pontianak Tenggara</p>
<p class="text-xs text-slate-400 mt-1">Kalimantan Barat 78124</p>
</div>
</div>
<div class="flex items-center gap-3">
<div
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fab fa-whatsapp text-untan-yellow"></i>
</div>
<div>
<p class="text-sm text-white font-medium">+62 851-7165-5161</p>
<p class="text-xs text-slate-400">Senin - Jumat, 08:00 - 16:00</p>
</div>
</div>
<div class="flex items-center gap-3">
<div
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-envelope text-untan-yellow"></i>
</div>
<div>
<p class="text-sm text-white font-medium">info@informatika.untan.ac.id</p>
</div>
</div>
</div>
</div>
<!-- Right: Quick Links & Social -->
<div class="col-span-7">
<div class="grid grid-cols-2 gap-4 mb-6">
<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-id-card"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_official_contact">Kontak Resmi</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_contact_desc">
Direktori kontak staf</p>
</div>
</a>
<a href="mailto:info@informatika.untan.ac.id" class="mega-link-card group">
<div
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
<i class="fas fa-comment-dots"></i>
</div>
<div>
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
data-i18n="link_feedback">Saran & Masukan</h4>
<p class="text-xs text-slate-500 mt-1" data-i18n="link_feedback_desc">Kirim
feedback Anda</p>
</div>
</a>
</div>
<div class="bg-slate-50 rounded-xl p-5">
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
data-i18n="follow_us">Ikuti Kami</h4>
<div class="flex gap-3">
<a href="https://instagram.com/informatika.untan" target="_blank"
class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#"
class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-youtube text-xl"></i>
</a>
<a href="#"
class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="#"
class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#"
class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#"
class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
<i class="fab fa-tiktok text-xl"></i>
</a>
</div>
</div>
</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>
<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
class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
aria-label="Ganti bahasa">
<span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
</button>
<button
class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
aria-label="Pengaturan aksesibilitas"
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
<i class="fas fa-universal-access" aria-hidden="true"></i>
</button>
</div>
<button id="close-mobile-menu"
class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
aria-label="Tutup menu navigasi">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
<a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
data-i18n="nav_home">Beranda</a>
<!-- Tentang Kami -->
<div class="pt-2">
<span class="text-xs font-bold text-slate-400 uppercase font-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="content.html?type=berita" 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">Informatika Angka</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>
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
data-i18n="link_info_agenda">Info & Agenda</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>
<a href="#"
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
<i class="fab fa-youtube text-red-500"></i> YouTube
</a>
</div>
</div>
</div>
</div>
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
<div class="container mx-auto px-4 lg:px-8 py-12">
<div class="mb-8 pb-8 border-b border-slate-200">
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Sekilas Informatika UNTAN</h1>
<p class="text-slate-500 text-sm">Kelompok 01 &mdash; Jellyfish.Corp &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
</div>
<div id="assignment-body" class="prose prose-slate max-w-none">
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
<!-- ===================== A. HERO ===================== -->
<section class="jf-hero-landing">
<div class="jf-hero-landing-bg"></div>
<div class="container jf-hero-landing-inner">
<div class="jf-hero-landing-content">
<h1 class="jf-hero-headline">Sekilas Informatika<br><span>Universitas Tanjungpura</span></h1>
<p class="jf-hero-sub">Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan
dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.</p>
<div class="jf-hero-ctas">
<a href="#kontak" class="jf-hero-cta-primary">Daftar Sekarang</a>
<a href="#tentang" class="jf-hero-cta-secondary">Pelajari Lebih ↓</a>
</div>
<div class="jf-hero-stats">
<div class="jf-hs-item">
<span class="jf-hs-num">2004</span>
<span class="jf-hs-label">Tahun Berdirinya</span>
</div>
<div class="jf-hs-div"></div>
<div class="jf-hs-item">
<span class="jf-hs-num">512</span>
<span class="jf-hs-label">Mahasiswa Aktif</span>
</div>
<div class="jf-hs-div"></div>
</div>
</div>
</div>
</section>
<!-- ===== MAIN CONTENT ===== -->
<main id="assignment-body">
<!-- ===================== B. TENTANG PRODI ===================== -->
<section class="jf-section jf-section-white" id="tentang">
<div class="container">
<div class="jf-about-layout">
<div class="jf-about-left">
<span class="jf-badge">Tentang Prodi</span>
<h2 class="jf-section-title">Mengenal Program Studi Informatika UNTAN</h2>
<p class="jf-about-intro">Program Studi Informatika Universitas Tanjungpura hadir sejak
<strong>1993</strong> dan merupakan salah satu pusat pengembangan talenta digital di
Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi
yang terdepan di bidang teknologi informasi yang terus maju.
</p>
<div class="jf-visi-misi-cards">
<div class="jf-vm-card jf-vm-visi">
<div class="jf-vm-label">🎯 Visi</div>
<p>Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada
informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui
solusi teknologi berbasis kearifan lokal.</p>
</div>
</div>
<div class="jf-misi-section">
<div class="jf-misi-label">📋 Misi</div>
<div class="jf-misi-list">
<div class="jf-misi-item">
<div class="jf-misi-num">1</div>
<div>
<strong>Pendidikan OBE Unggul</strong>
<p>Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan
inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten,
adaptif, beretika, dan berdaya saing global.</p>
</div>
</div>
<div class="jf-misi-item">
<div class="jf-misi-num">2</div>
<div>
<strong>Penelitian untuk SDGs</strong>
<p>Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung
pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan
tantangan lokal maupun global.</p>
</div>
</div>
<div class="jf-misi-item">
<div class="jf-misi-num">3</div>
<div>
<strong>Pengabdian Berbasis Kearifan Lokal</strong>
<p>Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam
kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara
inklusif dan berkelanjutan.</p>
</div>
</div>
<div class="jf-misi-item">
<div class="jf-misi-num">4</div>
<div>
<strong>Kemitraan Strategis</strong>
<p>Membangun kemitraan strategis dengan industri, pemerintah, dan institusi
akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan
informatika cerdas yang memberikan dampak nyata.</p>
</div>
</div>
<div class="jf-misi-item">
<div class="jf-misi-num">5</div>
<div>
<strong>Budaya Akademik Beretika</strong>
<p>Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan
berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM
unggul menghadapi disrupsi teknologi.</p>
</div>
</div>
</div>
</div>
</div>
<div class="jf-about-right">
<div class="jf-timeline-card">
<div class="jf-timeline-title">Tonggak Sejarah</div>
<div class="jf-timeline-list">
<div class="jf-tl-item">
<div class="jf-tl-year">2004</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Pendirian Program Studi</strong>
<span>Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2005</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>SNMPTN Pertama</strong>
<span>Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2006</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Akreditasi C</strong>
<span>Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2008</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Kelas Malam & SPOTA</strong>
<span>Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2016</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Akreditasi B</strong>
<span>Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2017</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Nama Resmi Berubah</strong>
<span>Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.).</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2019</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Angkatan PPAPK Terakhir</strong>
<span>Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2021</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>EdoXid Lahir</strong>
<span>Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2023</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Guru Besar Pertama</strong>
<span>Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T.</span>
</div>
</div>
<div class="jf-tl-item">
<div class="jf-tl-year">2025</div>
<div class="jf-tl-dot"></div>
<div class="jf-tl-content">
<strong>Kaprodi Ke-5</strong>
<span>Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===================== C. ANGKA ===================== -->
<section class="jf-section jf-section-light">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Data &amp; Statistik</span>
<h2 class="jf-section-title">Informatika UNTAN dalam Angka</h2>
<p class="jf-section-sub">
<center>Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN.
</center>
</p>
</div>
<div class="jf-stats-grid">
<div class="jf-stat-card jf-stat-blue">
<div class="jf-stat-num">518</div>
<div class="jf-stat-label">Mahasiswa Aktif</div>
<div class="jf-stat-sub">Tahun Akademik 2024/2025</div>
</div>
<div class="jf-stat-card jf-stat-yellow">
<div class="jf-stat-num">213</div>
<div class="jf-stat-label">Total Alumni</div>
<div class="jf-stat-sub">Data sejak tahun 2022</div>
</div>
<div class="jf-stat-card jf-stat-green">
<div class="jf-stat-num"> 6 Bulan</div>
<div class="jf-stat-label">Waktu Tunggu Kerja</div>
<div class="jf-stat-sub">Rata-rata lulusan terserap</div>
</div>
</div>
<div class="jf-stats-row2">
<div class="jf-stat-row-card">
<div class="jf-stat-row-label">Dosen Tetap</div>
<div class="jf-stat-row-num" style="color:#005eb8;">33</div>
<p style="font-size:0.82rem;color:#475569;margin-top:0.4rem;">Berpengalaman dan bersertifikasi
di bidangnya masing-masing.</p>
</div>
<div class="jf-stat-row-card">
<div class="jf-stat-row-label">Jurnal Ilmiah</div>
<div class="jf-stat-row-num" style="color:#feb401;">400+ Jurnal</div>
<div style="margin-top:0.4rem; font-size:0.82rem; color:#475569;">
<div style="margin-bottom:0.2rem;">📄 JEPIN &nbsp;·&nbsp; JUSTIN</div>
<div>📄 JURISTY &nbsp;·&nbsp; JUARA</div>
</div>
</div>
<div class="jf-stat-row-card">
<div class="jf-stat-row-label">Guru Besar</div>
<div class="jf-stat-row-num" style="color:#10b981;">1 Guru Besar</div>
<p style="font-size:0.82rem;color:#475569;margin-top:0.4rem;">Prof. Dr. Herry Sujaini, S.T., M.T. — Guru Besar pertama
Informatika UNTAN (sejak 2023).</p>
</div>
</div>
<div style="text-align:center;margin-top:1.5rem;">
<div class="jf-stat-row-card" style="display:inline-block;padding:1rem 2.5rem;">
<div class="jf-stat-row-label">Rasio Dosen : Mahasiswa</div>
<div class="jf-stat-row-num" style="color:#7c3aed;font-size:2rem;">1 : 11</div>
<div style="font-size:0.75rem;color:#94a3b8;">Memenuhi standar BAN-PT</div>
</div>
</div>
</div>
</section>
<!-- ===================== D. PENCAPAIAN ===================== -->
<section class="jf-section jf-section-white">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Prestasi</span>
<h2 class="jf-section-title">Pencapaian Membanggakan</h2>
<p class="jf-section-sub">
<center>Dari panggung nasional hingga kolaborasi internasional — Informatika UNTAN hadir,
bersaing, dan meninggalkan jejak.</center>
</p>
</div>
<div class="jf-filter-tabs">
<button class="jf-tab-btn jf-tab-active" data-filter="all">Semua</button>
<button class="jf-tab-btn" data-filter="kompetisi">Kompetisi</button>
<button class="jf-tab-btn" data-filter="publikasi">Publikasi &amp; Pengabdian</button>
<button class="jf-tab-btn" data-filter="aplikasi">Aplikasi Unggulan</button>
</div>
<div class="jf-prestasi-grid" id="prestasi-grid">
<div class="jf-prestasi-card" data-cat="kompetisi">
<span class="jf-prest-badge jf-prest-nasional">Kompetisi</span>
<h4>Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17</h4>
<p>Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).</p>
<div class="jf-prest-meta"><span>📅 2025 </span><span>Finalis</span></div>
</div>
<div class="jf-prestasi-card" data-cat="kompetisi">
<span class="jf-prest-badge jf-prest-nasional">Kompetisi</span>
<h4>Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming</h4>
<p>Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII oada bidang Competitive Programming </p>
<div class="jf-prest-meta"><span>📅 2025</span><span>Tim Regional Terbaik</span></div>
</div>
<div class="jf-prestasi-card" data-cat="kompetisi">
<span class="jf-prest-badge jf-prest-internasional">Kompetisi</span>
<h4>International Collegiate Programming Contest predikat Honor</h4>
<p>Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.</p>
<div class="jf-prest-meta"><span>🌏Asia Jakarta Regional Contest 2025</span><span>Honor</span></div>
</div>
<div class="jf-prestasi-card" data-cat="kompetisi">
<span class="jf-prest-badge jf-prest-nasional"> GEMASTIK XVII</span>
<h4>Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming</h4>
<p>Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII oada bidang Competitive Programming </p>
<div class="jf-prest-meta"><span>📅 2024</span><span>Tim Regional Terbaik</span></div>
</div>
<div class="jf-prestasi-card" data-cat="kompetisi">
<span class="jf-prest-badge jf-prest-nasional">Kompetisi</span>
<h4>LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI</h4>
<p>Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri</p>
<div class="jf-prest-meta"><span>📅 2024</span><span>PESERTA</span></div>
</div>
<div class="jf-prestasi-card" data-cat="publikasi">
<span class="jf-prest-badge jf-prest-publikasi">Publikasi</span>
<h4>Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning</h4>
<p>Penulis: EF Ripanti, EE Pratama, F Asrin.
Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.</p>
<div class="jf-prest-meta"><span>📅 2025</span></div>
</div>
<div class="jf-prestasi-card" data-cat="publikasi">
<span class="jf-prest-badge jf-prest-publikasi">Publikasi</span>
<h4>REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP</h4>
<p>Penulis: DA Nugraha, IY Sholva, EE Pratama.
Penelitian ini memanfaatkan metode BSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.</p>
<div class="jf-prest-meta"><span>📅 2024</span></div>
</div>
<div class="jf-prestasi-card" data-cat="publikasi">
<span class="jf-prest-badge jf-prest-publikasi">Publikasi</span>
<h4>Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means</h4>
<p>Penulis: AS Sukamto, W Setiawan, EE Pratama.
Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.</p>
<div class="jf-prest-meta"><span>📅 2023</span></div>
</div>
<div class="jf-prestasi-card" data-cat="publikasi">
<span class="jf-prest-badge jf-prest-penghargaan">Pengabdian Masyarakat</span>
<h4>KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR</h4>
<p>Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.</p>
<div class="jf-prest-meta"><span>📅 2025</span></div>
</div>
<div class="jf-prestasi-card" data-cat="aplikasi">
<span class="jf-prest-badge" style="background:#e0f2fe;color:#0369a1;">Inovasi Aplikasi</span>
<h4>SPOTA (2008)</h4>
<p>Sistem Pendukung Outline Tugas Akhir — lahir dari ide dosen, dibangun mahasiswa, masih
digunakan hingga kini. Inovasi yang melampaui zamannya.</p>
<div class="jf-prest-meta"><span>📅 2008</span><span>💡 Masih aktif</span></div>
</div>
<div class="jf-prestasi-card" data-cat="aplikasi">
<span class="jf-prest-badge" style="background:#e0f2fe;color:#0369a1;">Inovasi Aplikasi</span>
<h4>EdoXid (2021)</h4>
<p>Sistem pengajuan sidang digital — hadir menjawab pandemi, kini naik kelas ke skala Fakultas
MIPA Universitas Tanjungpura.</p>
<div class="jf-prest-meta"><span>📅 2021</span><span>🚀 Skala Fakultas</span></div>
</div>
</div>
</div>
</section>
<!-- ===================== E. STUDY CLUB ===================== -->
<section class="jf-section jf-section-light">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Komunitas</span>
<h2 class="jf-section-title">Study Club</h2>
<p class="jf-section-sub">
<center>Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang
terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian
spesifik di bidang informatika.</center>
</p>
</div>
<div class="jf-sc-grid">
<div class="jf-sc-card">
<div class="jf-sc-icon" style="background:#eff6ff;">💻</div>
<div class="jf-sc-name">ARISE</div>
<div class="jf-sc-alias">&nbsp; Competitive Programming</div>
<p>Program kerja ini berfokus pada peminatan <em>competitive programming</em>. Mahasiswa dilatih
untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman
bergengsi tingkat nasional maupun internasional.</p>
</div>
<div class="jf-sc-card">
<div class="jf-sc-icon" style="background:#f0fdf4;">🛠️</div>
<div class="jf-sc-name">Software Development</div>
<div class="jf-sc-alias">&nbsp; Software Development </div>
<p>Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental
dasar web, version control (GitHub), software development life cycle, Entity Relationship
Diagram, tech-stack, dan use case.</p>
</div>
<div class="jf-sc-card">
<div class="jf-sc-icon" style="background:#fefce8;">📊</div>
<div class="jf-sc-name">MINERVA</div>
<div class="jf-sc-alias">&nbsp; Data Mining</div>
<p>Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data,
analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan
insight yang bernilai.</p>
</div>
</div>
<div class="jf-sc-cta">
<div class="jf-sc-cta-left">
<strong>Bergabung dengan Study Club</strong>
<span>Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih
peminatan yang sesuai dengan minat dan tujuan karirmu.</span>
</div>
<a href="mailto:info@informatika.untan.ac.id" class="jf-cta-button">Info Lebih Lanjut →</a>
</div>
</div>
</section>
<!-- ===================== F. KARIR ===================== -->
<section class="jf-section jf-section-white">
<div class="container">
<div class="jf-karir-layout">
<div class="jf-karir-left">
<span class="jf-badge">Karir</span>
<h2 class="jf-section-title">Masa Depan Lulusan Informatika</h2>
<p class="jf-karir-headline-italic">Lulusan Informatika UNTAN bukan hanya pencari kerja — mereka
pencipta solusi.</p>
<p>Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi
pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang
menanti di berbagai sektor strategis.</p>
<div class="jf-karir-other" style="margin-top:1.5rem;">
<strong>Bidang Karir Lainnya:</strong>
<div class="jf-chip-wrap" style="margin-top:0.5rem;">
<span class="jf-chip">IT Project Manager</span>
<span class="jf-chip">Database Admin</span>
<span class="jf-chip">Cloud Architect</span>
<span class="jf-chip">Game Developer</span>
<span class="jf-chip">Business Intelligence</span>
<span class="jf-chip">IoT Engineer</span>
<span class="jf-chip">Akademisi / Dosen</span>
</div>
</div>
</div>
<div class="jf-karir-right">
<div class="jf-karir-card jf-karir-navy">
<div class="jf-kc-title">Software Engineer</div>
<div class="jf-kc-chips">
<span>Backend</span><span>Frontend</span><span>Mobile Dev</span><span>DevOps</span>
</div>
<div class="jf-kc-company">Gojek, Tokopedia, Traveloka, Startup</div>
</div>
<div class="jf-karir-card jf-karir-purple">
<div class="jf-kc-title">Data &amp; AI Specialist</div>
<div class="jf-kc-chips">
<span>Data Scientist</span><span>ML Engineer</span><span>AI
Researcher</span><span>Business Analyst</span>
</div>
<div class="jf-kc-company">Bank, BUMN, Fintech</div>
</div>
<div class="jf-karir-card jf-karir-green">
<div class="jf-kc-title">Cybersecurity</div>
<div class="jf-kc-chips">
<span>Penetration Tester</span><span>Security Analyst</span><span>Network
Engineer</span>
</div>
<div class="jf-kc-company">BSSN, Kominfo, Perbankan</div>
</div>
<div class="jf-karir-card jf-karir-orange">
<div class="jf-kc-title">Wirausaha Digital</div>
<div class="jf-kc-chips">
<span>Founder Startup</span><span>Freelancer</span><span>Digital
Consultant</span><span>E-commerce</span>
</div>
<div class="jf-kc-company">Mandiri, Remote Work</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===================== G. ALUMNI ===================== -->
<section class="jf-section jf-section-light">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Alumni</span>
<h2 class="jf-section-title">Kisah Sukses Alumni</h2>
<p class="jf-section-sub">
<center>Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir
gemilang — dari Pontianak, ke panggung dunia.</center>
</p>
</div>
<div class="jf-alumni-grid">
<div class="jf-alumni-card">
<div class="jf-alumni-header">
<div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#005eb8,#00b5e2);">IF
</div>
<div>
<div class="jf-alumni-name">Izhan Fakhruzi</div>
<div class="jf-alumni-batch">Informatika, Angkatan 2005</div>
</div>
</div>
<div class="jf-alumni-photo-placeholder">
<div class="jf-alumni-photo-inner">
<img src="images\Izhan.jpg" alt="">
</div>
</div>
<div class="jf-alumni-roles">
<span>Dosen UM Pontianak</span>
<span>PhD Candidate Granada</span>
</div>
<p>Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi,
melanjutkan studi magister di Marmara University melalui beasiswa Türkiye Bursları,
berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di
Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas
dan informatika kesehatan.</p>
<div class="jf-alumni-divider"></div>
</div>
<div class="jf-alumni-card">
<div class="jf-alumni-header">
<div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#7c3aed,#a855f7);">CD
</div>
<div>
<div class="jf-alumni-name">Charles Darwis Hariman</div>
<div class="jf-alumni-batch">Informatika, Angkatan 2018</div>
</div>
</div>
<div class="jf-alumni-photo-placeholder">
<div class="jf-alumni-photo-inner">
<img src="images\Charles.jpg" alt="">
</div>
</div>
<div class="jf-alumni-roles">
<span>Software Developer</span>
<span>FinTech Travixy Frankfurt</span>
</div>
<p>Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving,
melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan
bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech
Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai
miliaran Euro.</p>
<div class="jf-alumni-divider"></div>
</div>
<div class="jf-alumni-card">
<div class="jf-alumni-header">
<div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#059669,#10b981);">DP
</div>
<div>
<div class="jf-alumni-name">Dona Pramana Putra</div>
<div class="jf-alumni-batch">Informatika, Angkatan 2006</div>
</div>
</div>
<div class="jf-alumni-photo-placeholder">
<div class="jf-alumni-photo-inner">
<img src="images\Dona.jpg" alt="">
</div>
</div>
<div class="jf-alumni-roles">
<span>Product Team</span>
<span>AI Rudder</span>
</div>
<p>Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder,
berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di
China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan
perspektif global.</p>
<div class="jf-alumni-divider"></div>
</div>
</div>
</div>
</section>
<!-- ===================== H. INFRASTRUKTUR ===================== -->
<section class="jf-section jf-section-dark">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Infrastruktur</span>
<h2 class="jf-section-title" style="color:white;">Infrastruktur dan Fasilitas</h2>
<p class="jf-section-sub" style="color:white;">
<center style="color:rgba(255, 255, 255, 0.7);">Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi
mahasiswa.</center>
</p>
<div class="jf-infra-line"></div>
</div>
<div class="jf-infra-grid">
<div class="jf-infra-card" style="background:linear-gradient(135deg,#0ea5e9,#0284c7);">
<div class="jf-infra-icon">🖥️</div>
<div class="jf-infra-name">8 Laboratorium</div>
<p>Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber —
ber-AC, High-Speed PC.</p>
<div class="jf-infra-stat"><span>8</span> Lab Aktif &amp; Berteknologi</div>
</div>
<div class="jf-infra-card" style="background:linear-gradient(135deg,#7c3aed,#6d28d9);">
<div class="jf-infra-icon">☁️</div>
<div class="jf-infra-name">Data Center</div>
<p>Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan
deployment aplikasi.</p>
<div class="jf-infra-stat"><span>99.9%</span> Uptime · Redundant</div>
</div>
<div class="jf-infra-card" style="background:linear-gradient(135deg,#059669,#047857);">
<div class="jf-infra-icon">🚀</div>
<div class="jf-infra-name">IFUNTANHUB</div>
<p>Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing,
dan kolaborasi tim.</p>
<div class="jf-infra-stat"><span>Gratis</span> · GPU Access</div>
</div>
<div class="jf-infra-card" style="background:linear-gradient(135deg,#d97706,#b45309);">
<div class="jf-infra-icon">📚</div>
<div class="jf-infra-name">E-Resources</div>
<p>Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database
ilmiah lainnya.</p>
<div class="jf-infra-stat"><span>IEEE · Scopus · ACM</span></div>
</div>
</div>
<div class="jf-license-bar">
<span class="jf-lic-label">Lisensi Perangkat Lunak Tersedia:</span>
<div class="jf-lic-chips">
<span>Microsoft Office 365</span>
<span>JetBrains IDE</span>
<span>Adobe Creative Cloud</span>
<span>GitHub Enterprise</span>
<span>Figma Education</span>
<span>MATLAB</span>
<span>Cisco Packet Tracer</span>
<span>AWS Academy</span>
</div>
</div>
</div>
</section>
<!-- ===================== I. MITRA ===================== -->
<section class="jf-section jf-section-white">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Kerjasama</span>
<h2 class="jf-section-title">Mitra Strategis Informatika UNTAN</h2>
<p class="jf-section-sub">
<center>Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi
pemerintah, dan lembaga pendidikan terkemuka.</center>
</p>
</div>
<div class="jf-mitra-group-title">Industri &amp; Swasta</div>
<div class="jf-mitra-grid">
<div class="jf-mitra-card">
<div class="jf-mitra-logo"></div>
<div class="jf-mitra-name">PT. Indosat Ooredoo</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-logo"></div>
<div class="jf-mitra-name">PT. PLN Nusantara</div>
</div>
</div>
<div class="jf-mitra-group-title">Instansi Pemerintah</div>
<div class="jf-mitra-grid jf-mitra-grid-gov" style="grid-template-columns:repeat(6,1fr)">
<div class="jf-mitra-card">
<div class="jf-mitra-name">Diskominfo Kalbar</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">POLDA Kalbar</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Bappeda Sambas</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Bappeda Sintang</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Bappeda Bengkayang</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">BKPSDM</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">BPBD Sintang</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">BKD Pontianak</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Disperkim Singkawang</div>
</div>
</div>
<div class="jf-mitra-group-title">Perguruan Tinggi &amp; Lembaga Riset</div>
<div class="jf-mitra-grid" style="grid-template-columns:repeat(6,1fr);">
<div class="jf-mitra-card">
<div class="jf-mitra-name">UNIMAS Malaysia</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">UUM Malaysia</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">UCS Sarawak</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">UTEM Malaysia</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">IPB Indonesia</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Polnep</div>
</div>
<div class="jf-mitra-card">
<div class="jf-mitra-name">Poltekkes Pontianak</div>
</div>
</div>
</div>
</section>
<!-- ===================== VIDEO PROFIL ===================== -->
<section class="jf-section jf-section-light">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge">Video Profil</span>
<h2 class="jf-section-title">Profil Fakultas Teknik UNTAN</h2>
<p class="jf-section-sub">
<center>Kenali lebih dekat Fakultas Teknik Universitas Tanjungpura melalui video profil resmi
berikut.</center>
</p>
</div>
<div style="
display: flex;
justify-content: center;
margin-top: 2rem;
">
<a href="https://youtu.be/52Tn9e750aY?si=0_D7ZJMm1Yv8OQeh" target="_blank" rel="noopener noreferrer"
style="
display: block;
width: 100%;
max-width: 800px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,0.18);
aspect-ratio: 16/9;
position: relative;
text-decoration: none;
background: #000;
">
<!-- Thumbnail YouTube (maxresdefault / hqdefault) -->
<img src="https://img.youtube.com/vi/52Tn9e750aY/maxresdefault.jpg"
onerror="this.src='https://img.youtube.com/vi/52Tn9e750aY/hqdefault.jpg'"
alt="Profil Fakultas Teknik UNTAN" style="
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.3s;
" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'" />
<!-- Overlay tombol play -->
<div style="
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
">
<div style="
width: 72px; height: 72px;
background: rgba(255,0,0,0.9);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: transform 0.2s;
" onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'">
<svg width="28" height="28" viewBox="0 0 24 24" fill="white">
<path d="M8 5v14l11-7z" />
</svg>
</div>
<span style="
color: #fff;
font-size: 15px;
font-weight: 600;
background: rgba(0,0,0,0.55);
padding: 5px 16px;
border-radius: 20px;
letter-spacing: 0.3px;
">Tonton di YouTube</span>
</div>
</a>
</div>
</div>
</section>
<!-- ===================== K. CTA / KONTAK ===================== -->
<section class="jf-section jf-cta-section" id="kontak">
<div class="container jf-cta-inner">
<div class="jf-cta-left">
<span class="jf-badge">Bergabung Bersama Kami</span>
<h2 class="jf-cta-title">Mulai Perjalanan Digital Anda <span class="jf-cta-highlight">Bersama
Kami</span></h2>
<p>Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda
sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.</p>
<div class="jf-cta-btns">
<a href="#" class="jf-btn-yellow">Daftar Mahasiswa Baru</a>
<a href="https://wa.me/6285171655161" class="jf-btn-green">💬 Chat WhatsApp</a>
</div>
</div>
<div class="jf-cta-right">
<div class="jf-kontak-card">
<div class="jf-kontak-title">Informasi Kontak</div>
<div class="jf-kontak-list">
<div class="jf-kontak-item">
<div class="jf-kontak-icon">📍</div>
<div class="jf-kontak-info">
<div class="jf-kontak-label">Alamat</div>
<div class="jf-kontak-val">Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec.
Pontianak Tenggara, Kota Pontianak, Kalimantan Barat 78124</div>
</div>
</div>
<div class="jf-kontak-item">
<div class="jf-kontak-icon">✉️</div>
<div class="jf-kontak-info">
<div class="jf-kontak-label">Email</div>
<div class="jf-kontak-val">info@informatika.untan.ac.id</div>
</div>
</div>
<div class="jf-kontak-item">
<div class="jf-kontak-icon">💬</div>
<div class="jf-kontak-info">
<div class="jf-kontak-label">WhatsApp</div>
<div class="jf-kontak-val">+62 851-7165-5161<br><small>Senin – Jumat, 08.00 – 16.00
WIB</small></div>
</div>
</div>
<div class="jf-kontak-item">
<div class="jf-kontak-icon">📞</div>
<div class="jf-kontak-info">
<div class="jf-kontak-label">Telepon / Fax</div>
<div class="jf-kontak-val">+62(561) 739637</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
</div>
</div>
</main>
<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>
<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');
chevron.style.transform = isActive ? 'rotate(180deg)' : '';
});
}
function closeMenus() {
Object.values(menuMap).forEach(panelId => {
const panel = document.getElementById(panelId);
if (panel) panel.classList.remove('active');
});
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');
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);
}
});
});
megaOverlay.addEventListener('click', closeMenus);
document.addEventListener('click', (e) => {
const clickedInsideNav = e.target.closest('#main-nav');
const clickedInsidePanel = e.target.closest('.mega-panel');
if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
closeMenus();
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && activeMenu) {
closeMenus();
}
});
})();
</script>
<script>
(function() {
const mobileBtn = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMobileBtn= document.getElementById('close-mobile-menu');
if (mobileBtn && mobileMenu) {
mobileBtn.addEventListener('click', function() {
const isOpen = !mobileMenu.classList.contains('-translate-x-full');
mobileMenu.classList.toggle('-translate-x-full');
mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
});
}
if (closeMobileBtn && mobileMenu) {
closeMobileBtn.addEventListener('click', function() {
mobileMenu.classList.add('-translate-x-full');
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
});
}
})();
</script>
<script src="../../assets/global/localization.js"></script>
</body>
</html>
View Git Blame Copy Permalink