forked from izu/student-web-if-development-kit
2650 lines
177 KiB
HTML
2650 lines
177 KiB
HTML
<!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 data-i18n="grp_habisiniseminar_page_title">Group 02 – HabisIniSeminar | Informatika UNTAN</title>
|
||
<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">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
||
<link rel="stylesheet" href="./style.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">
|
||
<section class="hero" style="background: var(--brand-navy);">
|
||
<div class="container hero-inner">
|
||
<span class="badge" data-i18n="grp_habisiniseminar_badge">Informasi Jalur Seleksi</span>
|
||
<h1>
|
||
<span data-i18n="grp_habisiniseminar_hero_title_1">Penerimaan Mahasiswa Baru</span><br>
|
||
<span data-i18n="grp_habisiniseminar_hero_title_2" style="color: var(--brand-yellow);">Informatika UNTAN</span>
|
||
</h1>
|
||
<p class="hero-description" data-i18n="grp_habisiniseminar_hero_description">Informasi dan jadwal pendaftaran mahasiswa baru melalui jalur SNBP, SNBT, dan Jalur Mandiri UNTAN</p>
|
||
</div>
|
||
</section>
|
||
<div class="container mx-auto px-4 lg:px-8 py-12">
|
||
<div id="assignment-body" class="prose prose-slate max-w-none">
|
||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||
|
||
<section id="about" data-aos="fade-up">
|
||
<div class="about-layout">
|
||
<div class="about-text">
|
||
<h1 class="section-title" data-i18n="grp_habisiniseminar_about_title">Seleksi Program Sarjana</h1>
|
||
<div class="section-title-line"></div>
|
||
<p class="section-desc" data-i18n="grp_habisiniseminar_about_desc">Program Studi Informatika Universitas Tanjungpura membuka kesempatan bagi putra-putri terbaik bangsa untuk bergabung melalui berbagai jalur seleksi. Kami mencari talenta yang siap menjadi inovator teknologi masa depan.</p>
|
||
</div>
|
||
<div class="path-cards-slider-wrap">
|
||
<div class="path-cards-grid" id="pathCardsSlider">
|
||
<div class="path-column">
|
||
<div class="path-step-head">
|
||
<span class="path-step-circle" aria-hidden="true">1</span>
|
||
</div>
|
||
<div class="path-card" onclick="switchPath('snbp')">
|
||
<div class="path-card-body">
|
||
<h3>SNBP</h3>
|
||
<p data-i18n="grp_habisiniseminar_path_snbp_desc">Seleksi Nasional Berdasarkan Prestasi</p>
|
||
</div>
|
||
<span class="path-card-badge">Feb – Mar</span>
|
||
</div>
|
||
</div>
|
||
<span class="path-between-arrow" aria-hidden="true">→</span>
|
||
<div class="path-column">
|
||
<div class="path-step-head">
|
||
<span class="path-step-circle" aria-hidden="true">2</span>
|
||
</div>
|
||
<div class="path-card" onclick="switchPath('snbt')">
|
||
<div class="path-card-body">
|
||
<h3>SNBT</h3>
|
||
<p data-i18n="grp_habisiniseminar_path_snbt_desc">Seleksi Nasional Berdasarkan Tes</p>
|
||
</div>
|
||
<span class="path-card-badge" data-i18n="grp_habisiniseminar_month_mar_mei">Mar – Mei</span>
|
||
</div>
|
||
</div>
|
||
<span class="path-between-arrow" aria-hidden="true">→</span>
|
||
<div class="path-column">
|
||
<div class="path-step-head">
|
||
<span class="path-step-circle" aria-hidden="true">3</span>
|
||
</div>
|
||
<div class="path-card" onclick="switchPath('smmptn')">
|
||
<div class="path-card-body">
|
||
<h3>SMMPTN Barat</h3>
|
||
<p data-i18n="grp_habisiniseminar_path_smmptn_desc">Seleksi Mandiri Wilayah Barat</p>
|
||
</div>
|
||
<span class="path-card-badge" data-i18n="grp_habisiniseminar_month_mei_jun">Mei – Juni</span>
|
||
</div>
|
||
</div>
|
||
<span class="path-between-arrow" aria-hidden="true">→</span>
|
||
<div class="path-column">
|
||
<div class="path-step-head">
|
||
<span class="path-step-circle" aria-hidden="true">4</span>
|
||
</div>
|
||
<div class="path-card" onclick="switchPath('mandiri')">
|
||
<div class="path-card-body">
|
||
<h3>Mandiri UNTAN</h3>
|
||
<p data-i18n="grp_habisiniseminar_path_mandiri_desc">Seleksi Mandiri Universitas Tanjungpura</p>
|
||
</div>
|
||
<span class="path-card-badge" data-i18n="grp_habisiniseminar_month_jun">Juni</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slider-track path-cards-slider-track">
|
||
<div class="slider-thumb" id="thumb-path"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="info-jalur-header">
|
||
<h2 data-i18n="grp_habisiniseminar_info_jalur_title">Informasi Jalur Seleksi</h2>
|
||
<div class="header-divider"></div>
|
||
</div>
|
||
|
||
<div id="main-layout">
|
||
<nav id="sidebar">
|
||
<div class="sidebar-card">
|
||
<div class="sidebar-heading" data-i18n="grp_habisiniseminar_sidebar_heading">Pilih Jalur</div>
|
||
|
||
<div class="sidebar-group" id="group-snbp">
|
||
<button class="sidebar-group-btn active" onclick="toggleGroup('snbp')" id="btn-snbp">
|
||
<span>SNBP</span>
|
||
<i class="fas fa-chevron-up chevron"></i>
|
||
</button>
|
||
<div class="sidebar-sub open" id="sub-snbp">
|
||
<a class="active" data-path="snbp" data-section="general" onclick="goTo('snbp', 'general')" data-i18n="grp_habisiniseminar_sidebar_link_general">Informasi Umum</a>
|
||
<a data-path="snbp" data-section="persyaratan" onclick="goTo('snbp', 'persyaratan')" data-i18n="grp_habisiniseminar_sidebar_link_persyaratan">Persyaratan</a>
|
||
<a data-path="snbp" data-section="mekanisme" onclick="goTo('snbp', 'mekanisme')" data-i18n="grp_habisiniseminar_sidebar_link_mekanisme">Mekanisme</a>
|
||
<a data-path="snbp" data-section="jadwal" onclick="goTo('snbp', 'jadwal')" data-i18n="grp_habisiniseminar_sidebar_link_jadwal">Jadwal</a>
|
||
<a data-path="snbp" data-section="biaya" onclick="goTo('snbp', 'biaya')" data-i18n="grp_habisiniseminar_sidebar_link_biaya">Biaya Pendaftaran & Pendidikan</a>
|
||
<a data-path="snbp" data-section="beasiswa" onclick="goTo('snbp', 'beasiswa')" data-i18n="grp_habisiniseminar_sidebar_link_beasiswa">Beasiswa</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-group" id="group-snbt">
|
||
<button class="sidebar-group-btn" onclick="toggleGroup('snbt')" id="btn-snbt">
|
||
<span>SNBT</span>
|
||
<i class="fas fa-chevron-down chevron"></i>
|
||
</button>
|
||
<div class="sidebar-sub" id="sub-snbt">
|
||
<a data-path="snbt" data-section="general" onclick="goTo('snbt', 'general')" data-i18n="grp_habisiniseminar_sidebar_link_general">Informasi Umum</a>
|
||
<a data-path="snbt" data-section="persyaratan" onclick="goTo('snbt', 'persyaratan')" data-i18n="grp_habisiniseminar_sidebar_link_persyaratan">Persyaratan</a>
|
||
<a data-path="snbt" data-section="mekanisme" onclick="goTo('snbt', 'mekanisme')" data-i18n="grp_habisiniseminar_sidebar_link_mekanisme">Mekanisme</a>
|
||
<a data-path="snbt" data-section="jadwal" onclick="goTo('snbt', 'jadwal')" data-i18n="grp_habisiniseminar_sidebar_link_jadwal">Jadwal</a>
|
||
<a data-path="snbt" data-section="biaya" onclick="goTo('snbt', 'biaya')" data-i18n="grp_habisiniseminar_sidebar_link_biaya">Biaya Pendaftaran & Pendidikan</a>
|
||
<a data-path="snbt" data-section="beasiswa" onclick="goTo('snbt', 'beasiswa')" data-i18n="grp_habisiniseminar_sidebar_link_beasiswa">Beasiswa</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-group" id="group-smmptn">
|
||
<button class="sidebar-group-btn" onclick="toggleGroup('smmptn')" id="btn-smmptn">
|
||
<span>SMMPTN-Barat</span>
|
||
<i class="fas fa-chevron-down chevron"></i>
|
||
</button>
|
||
<div class="sidebar-sub" id="sub-smmptn">
|
||
<a data-path="smmptn" data-section="general" onclick="goTo('smmptn', 'general')" data-i18n="grp_habisiniseminar_sidebar_link_general">Informasi Umum</a>
|
||
<a data-path="smmptn" data-section="persyaratan" onclick="goTo('smmptn', 'persyaratan')" data-i18n="grp_habisiniseminar_sidebar_link_persyaratan">Persyaratan</a>
|
||
<a data-path="smmptn" data-section="mekanisme" onclick="goTo('smmptn', 'mekanisme')" data-i18n="grp_habisiniseminar_sidebar_link_mekanisme">Mekanisme</a>
|
||
<a data-path="smmptn" data-section="jadwal" onclick="goTo('smmptn', 'jadwal')" data-i18n="grp_habisiniseminar_sidebar_link_jadwal">Jadwal</a>
|
||
<a data-path="smmptn" data-section="biaya" onclick="goTo('smmptn', 'biaya')" data-i18n="grp_habisiniseminar_sidebar_link_biaya">Biaya Pendaftaran & Pendidikan</a>
|
||
<a data-path="smmptn" data-section="beasiswa" onclick="goTo('smmptn', 'beasiswa')" data-i18n="grp_habisiniseminar_sidebar_link_beasiswa">Beasiswa</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-group" id="group-mandiri">
|
||
<button class="sidebar-group-btn" onclick="toggleGroup('mandiri')" id="btn-mandiri">
|
||
<span>MANDIRI-UNTAN</span>
|
||
<i class="fas fa-chevron-down chevron"></i>
|
||
</button>
|
||
<div class="sidebar-sub" id="sub-mandiri">
|
||
<a data-path="mandiri" data-section="general" onclick="goTo('mandiri', 'general')" data-i18n="grp_habisiniseminar_sidebar_link_general">Informasi Umum</a>
|
||
<a data-path="mandiri" data-section="persyaratan" onclick="goTo('mandiri', 'persyaratan')" data-i18n="grp_habisiniseminar_sidebar_link_persyaratan">Persyaratan</a>
|
||
<a data-path="mandiri" data-section="mekanisme" onclick="goTo('mandiri', 'mekanisme')" data-i18n="grp_habisiniseminar_sidebar_link_mekanisme">Mekanisme</a>
|
||
<a data-path="mandiri" data-section="jadwal" onclick="goTo('mandiri', 'jadwal')" data-i18n="grp_habisiniseminar_sidebar_link_jadwal">Jadwal</a>
|
||
<a data-path="mandiri" data-section="biaya" onclick="goTo('mandiri', 'biaya')" data-i18n="grp_habisiniseminar_sidebar_link_biaya">Biaya Pendaftaran & Pendidikan</a>
|
||
<a data-path="mandiri" data-section="beasiswa" onclick="goTo('mandiri', 'beasiswa')" data-i18n="grp_habisiniseminar_sidebar_link_beasiswa">Beasiswa</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sidebar-data-note" data-i18n="grp_habisiniseminar_sidebar_data_date">
|
||
<em>*Data yang digunakan per tanggal 25 Mei 2026</em>
|
||
</p>
|
||
</div>
|
||
</nav>
|
||
|
||
<div id="content-area">
|
||
|
||
<!-- ===================== SNBP PANEL ===================== -->
|
||
<div class="path-panel active" id="panel-snbp">
|
||
<div class="content-section" id="snbp-general">
|
||
<h2 class="section-h2">
|
||
<span data-i18n="grp_habisiniseminar_snbp_title">SNBP – Seleksi Nasional Berdasarkan Prestasi</span>
|
||
</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_info_snbp">Seleksi Nasional Berdasarkan Prestasi (SNBP) merupakan jalur penerimaan mahasiswa baru Perguruan Tinggi Negeri (PTN) yang diselenggarakan secara nasional oleh SNPMB.</p>
|
||
<div class="cta-row">
|
||
<a class="btn-cta btn-yellow" href="https://snpmb.id/" target="_blank"><i class="fas fa-desktop"></i> Website SNPMB</a>
|
||
<a class="btn-cta btn-yellow" href="https://www.instagram.com/snpmb_id/" target="_blank"><i class="fab fa-instagram"></i> Instagram SNPMB</a>
|
||
<a class="btn-cta btn-yellow" href="https://halo.snpmb.id/" target="_blank"><i class="fas fa-info-circle"></i> Helpdesk SNPMB</a>
|
||
</div>
|
||
<div class="chart-card" data-aos="fade-up">
|
||
<h3 data-i18n="grp_habisiniseminar_chart_title">Grafik Peminat dan Daya Tampung per Tahun</h3>
|
||
<canvas id="snbpChart" height="130"></canvas>
|
||
<div class="chart-legend">
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-navy)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_applicants">Jumlah Peminat</span>
|
||
</span>
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-yellow)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_capacity">Daya Tampung</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbp-persyaratan">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_persyaratan">Persyaratan</h2>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header open" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbp_req_general">Persyaratan Umum Mendaftar SNBP</span>
|
||
<i class="fas fa-chevron-up acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body open" data-i18n-html="grp_habisiniseminar_snbp_req_general_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Merupakan siswa SMA/SMK/MA kelas terakhir pada <strong>periode ini</strong> yang <strong>memiliki prestasi unggul</strong>.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Memiliki NISN dan <strong>terdaftar di PDSS</strong>.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Memiliki <strong>nilai rapor</strong> yang telah diisikan di PDSS sesuai dengan ketentuan.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Memiliki <strong>prestasi akademik</strong>.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Memenuhi persyaratan yang ditentukan oleh masing-masing PTN Akademik dan PTN Vokasi.</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbp_ketentuan">Ketentuan SNPMB</span>
|
||
<i class="fas fa-chevron-down acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body" data-i18n-html="grp_habisiniseminar_snbp_ketentuan_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Siswa yang telah dinyatakan lulus seleksi Jalur SNBP tidak dapat mendaftar UTBK-SNBT.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Siswa yang dinyatakan lulus seleksi Jalur SNBP tidak dapat mendaftar seleksi Jalur Mandiri pada periode yang sama di PTN manapun.</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbp_req_accepted">Persyaratan Umum Diterima SNBP</span>
|
||
<i class="fas fa-chevron-down acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body" data-i18n-html="grp_habisiniseminar_snbp_req_accepted_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta telah lulus dari satuan pendidikan SMA/SMK/MA atau sederajat</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta dinyatakan lulus SNBP pada periode ini</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta lolos verifikasi data serta memenuhi persyaratan lain yang ditetapkan oleh masing-masing PTN</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta melakukan daftar ulang di PTN tempat diterima sesuai dengan ketentuan yang berlaku</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbp-mekanisme">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_mekanisme">Mekanisme</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_snbp_mekanisme_text">
|
||
<p class="mek-text">Seleksi Nasional Berdasarkan Prestasi (SNBP) di Universitas Tanjungpura mempertimbangkan performa akademik siswa secara menyeluruh melalui nilai rapor, serta pencapaian prestasi sebagai nilai tambah dalam proses seleksi. Komponen yang dinilai meliputi:</p>
|
||
<ul class="mek-check-list">
|
||
<li><span class="req-check" style="margin-top: 2px"><i class="fas fa-check"></i></span><span><strong>Nilai rapor:</strong> rata-rata nilai seluruh mata pelajaran termasuk pada mata pelajaran yang relevan dengan program studi yang dipilih.</span></li>
|
||
<li><span class="req-check" style="margin-top: 2px"><i class="fas fa-check"></i></span><span><strong>Prestasi akademik dan non-akademik:</strong> pencapaian baik di bidang ilmu pengetahuan (seperti olimpiade atau lomba sains) maupun di luar akademik (seperti olahraga, seni, organisasi, dan kegiatan ekstrakurikuler)</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbp-jadwal">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_jadwal">Jadwal Pendaftaran</h2>
|
||
<div class="timeline-wrap" data-aos="fade-up">
|
||
<div class="timeline-center-line"></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_des_jan">Desember – Januari</h4><p data-i18n="grp_habisiniseminar_tl_snbp_1">Pengumuman kuota sekolah dan masa sanggah</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jan">Januari</h4><p data-i18n="grp_habisiniseminar_tl_snbp_2">Registrasi akun dan pengisian PDSS oleh sekolah</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jan_feb">Januari – Februari</h4><p data-i18n="grp_habisiniseminar_tl_snbp_3">Registrasi akun SNPMB siswa</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_feb">Februari</h4><p data-i18n="grp_habisiniseminar_tl_snbp_4">Pendaftaran SNBP</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_mar_apr">Maret – April</h4><p data-i18n="grp_habisiniseminar_tl_snbp_5">Pengumuman hasil SNBP</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_feb_apr">Februari – April</h4><p data-i18n="grp_habisiniseminar_tl_snbp_6">Unduh kartu peserta SNBP</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbp-biaya">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_biaya">Biaya Pendaftaran & Pendidikan</h2>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendaftaran">Biaya Pendaftaran</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<div class="fee-row-zero"><span data-i18n="grp_habisiniseminar_fee_selection">Pembayaran Seleksi</span><span>Rp 0,00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendidikan">Biaya Pendidikan</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_snbp_fee_desc">UKT dibagi dalam beberapa kategori yang disesuaikan dengan kemampuan ekonomi orang tua mahasiswa dan <strong>dibayarkan tiap semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_group">Golongan UKT</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>KLP I</td><td>500.000</td></tr>
|
||
<tr><td>KLP II</td><td>1.000.000</td></tr>
|
||
<tr><td>KLP III</td><td>3.200.000</td></tr>
|
||
<tr><td>KLP IV</td><td>3.300.000</td></tr>
|
||
<tr><td>KLP V</td><td>3.450.000</td></tr>
|
||
<tr><td>KLP VI</td><td>5.000.000</td></tr>
|
||
<tr><td>KLP VII</td><td>6.550.000</td></tr>
|
||
<tr><td>KLP VIII</td><td>8.100.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_highlight_snbp">Mahasiswa yang diterima melalui SNBP dengan menggunakan KIP Kuliah akan diverifikasi dan berpeluang mendapatkan pembebasan UKT sesuai ketentuan KIP Kuliah dan UNTAN.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbp-beasiswa">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_beasiswa">Beasiswa</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_snbp_beasiswa_desc">Para mahasiswa bisa memperoleh beasiswa dari berbagai sumber dengan mekanisme pengajuan sesuai ketentuan lembaga pemberi beasiswa.</p>
|
||
<div class="scholarship-slider-wrap">
|
||
<div class="scholarship-slider" id="slider-snbp">
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-id-card" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_kip">Kartu Indonesia Pintar Kuliah</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_kip_desc">KIP-Kuliah ditujukan secara eksklusif hanya untuk yang tidak mampu secara ekonomi</p>
|
||
<a class="btn-detail" href="https://kip-kuliah.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- BCA -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-university" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_bca">Beasiswa BCA</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_bca_desc">Beasiswa dalam bentuk Program Pendidikan Teknik Informatika (PPTI) yang diselenggarakan oleh BCA.</p>
|
||
<a class="btn-detail" href="https://karir.bca.co.id/beasiswa-bca" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- Djarum -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-star" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_djarum">Djarum Beasiswa Plus</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_djarum_desc">Beasiswa pengembangan talenta digital dari Djarum Foundation untuk mahasiswa semester 4 ke atas.</p>
|
||
<a class="btn-detail" href="https://djarumbeasiswaplus.org/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- GenBI -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-hand-holding-heart" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_genbi">Beasiswa Bank Indonesia</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_genbi_desc">Beasiswa dari Bank Indonesia yang memberikan bantuan pendidikan dan pengembangan diri bagi mahasiswa berprestasi.</p>
|
||
<a class="btn-detail" href="https://share.google/OaZZyx5ak6EHKSF8W" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- ADik -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-globe" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_adik">Beasiswa ADik Papua & 3T</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_adik_desc">Beasiswa afirmasi untuk mahasiswa asli Papua, Papua Barat, dan daerah 3T (Terdepan, Terluar, Tertinggal).</p>
|
||
<a class="btn-detail" href="https://adik.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
</div>
|
||
<div class="slider-track"><div class="slider-thumb" id="thumb-snbp"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SNBT PANEL ===================== -->
|
||
<div class="path-panel" id="panel-snbt">
|
||
<div class="content-section" id="snbt-general">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_snbt_title">SNBT – Seleksi Nasional Berdasarkan Tes</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_info_snbt">Seleksi Nasional Berdasarkan Tes (SNBT) merupakan jalur penerimaan mahasiswa baru di Perguruan Tinggi Negeri (PTN) yang menggunakan ujian terstandar secara nasional.</p>
|
||
<div class="cta-row">
|
||
<a class="btn-cta btn-yellow" href="https://snpmb.id/" target="_blank"><i class="fas fa-desktop"></i> Website SNPMB</a>
|
||
<a class="btn-cta btn-yellow" href="https://www.instagram.com/snpmb_id/" target="_blank"><i class="fab fa-instagram"></i> Instagram SNPMB</a>
|
||
<a class="btn-cta btn-yellow" href="https://halo.snpmb.id/" target="_blank"><i class="fas fa-info-circle"></i> Helpdesk SNPMB</a>
|
||
</div>
|
||
<div class="chart-card" data-aos="fade-up">
|
||
<h3 data-i18n="grp_habisiniseminar_chart_title">Grafik Peminat dan Daya Tampung per Tahun</h3>
|
||
<canvas id="snbtChart" height="130"></canvas>
|
||
<div class="chart-legend">
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-navy)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_applicants">Jumlah Peminat</span>
|
||
</span>
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-yellow)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_capacity">Daya Tampung</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbt-persyaratan">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_persyaratan">Persyaratan</h2>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header open" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbt_req_general">Persyaratan Umum Mendaftar SNBT</span>
|
||
<i class="fas fa-chevron-up acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body open" data-i18n-html="grp_habisiniseminar_snbt_req_general_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta harus <strong>memiliki Akun SNPMB Siswa</strong>. Registrasi Akun SNPMB Siswa dapat dilakukan di Portal SNPMB</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta merupakan <strong>Warga Negara Indonesia (WNI)</strong> yang memiliki <strong>Nomor Induk Kependudukan (NIK)</strong></span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta adalah siswa SMA/SMK/MA atau sederajat pada <strong>kelas terakhir</strong>, atau peserta didik Paket C dengan usia <strong>maksimal 25 tahun</strong></span></li>
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text">Bagi siswa yang <strong>belum memiliki ijazah</strong>, wajib melampirkan <strong>surat keterangan sebagai siswa kelas 12</strong> yang sekurang-kurangnya memuat:</p>
|
||
<ul class="req-sublist">
|
||
<li>Identitas diri (nama, kelas, NISN, dan NPSN)</li>
|
||
<li>Pas foto terbaru <strong>(berwarna)</strong></li>
|
||
<li>Tanda tangan Kepala Sekolah/Madrasah</li>
|
||
<li>Stempel/cap sekolah</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Lulusan SMA/sederajat dari luar negeri wajib memiliki ijazah yang telah disetarakan</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Bagi peserta yang memilih program studi bidang <strong>Seni dan/atau Olahraga</strong> wajib mengunggah portofolio</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta memiliki kondisi kesehatan yang tidak mengganggu kelancaran proses studi</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Bagi peserta berkebutuhan khusus <strong>tunanetra</strong> wajib mengunggah <strong>Surat Pernyataan Tuna Netra</strong></span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta wajib membayar biaya UTBK sesuai ketentuan</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbt_utbk">Ketentuan SNPMB</span>
|
||
<i class="fas fa-chevron-down acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body" data-i18n-html="grp_habisiniseminar_snbt_ketentuan_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta harus memiliki Akun SNPMB Siswa. Registrasi Akun SNPMB Siswa dapat dilakukan di Portal SNPMB</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta merupakan Warga Negara Indonesia (WNI) yang memiliki Nomor Induk Kependudukan (NIK)</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta adalah siswa SMA/SMK/MA atau sederajat pada kelas terakhir, atau peserta didik Paket C tahun 2026 dengan usia maksimal 25 tahun</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Bagi peserta yang memilih program studi bidang Seni dan/atau Olahraga wajib mengunggah portofolio</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-header" onclick="toggleAcc(this)">
|
||
<span data-i18n="grp_habisiniseminar_acc_snbt_req_prodi">Persyaratan Umum Diterima SNBT</span>
|
||
<i class="fas fa-chevron-down acc-icon"></i>
|
||
</button>
|
||
<div class="accordion-body" data-i18n-html="grp_habisiniseminar_snbt_req_accepted_body">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta telah lulus dari satuan pendidikan SMA/SMK/MA atau sederajat</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta dinyatakan lulus seleksi SNBT</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta lolos verifikasi data serta memenuhi persyaratan lain yang ditetapkan oleh masing-masing PTN</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta melakukan daftar ulang di PTN tempat diterima sesuai dengan ketentuan yang berlaku</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbt-mekanisme">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_mekanisme">Mekanisme</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_snbt_mekanisme_full">
|
||
<p class="mek-text">Seleksi Nasional Berdasarkan Tes (SNBT) dilaksanakan melalui Ujian Tulis Berbasis Komputer (UTBK), yaitu tes terstandar untuk mengukur potensi kognitif, penalaran matematika, serta kemampuan literasi dalam bahasa Indonesia dan bahasa Inggris. UTBK bertujuan untuk menilai kemampuan berpikir logis, pemecahan masalah, serta kemampuan belajar yang tinggi sehingga dapat memahami materi yang akan diajarkan pada program studi spesifik. Selain itu, diharapkan terbentuknya kesempatan yang sama kepada semua calon mahasiswa dengan latar belakang ekonomi maupun kualitas pembelajaran sekolah asal yang berbeda.</p>
|
||
<ul class="mek-check-list">
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text"><strong>Tes Potensi Skolastik (TPS)</strong> mengukur kemampuan kognitif yang diperlukan untuk menunjang keberhasilan di pendidikan formal, khususnya di perguruan tinggi. Aspek yang diujikan meliputi:</p>
|
||
<ul class="req-sublist">
|
||
<li><strong>Kemampuan penalaran umum</strong>, mencakup penalaran induktif, deduktif, dan kuantitatif</li>
|
||
<li>Pengetahuan dan pemahaman umum</li>
|
||
<li>Pemahaman bacaan dan menulis</li>
|
||
<li><strong>Pengetahuan Kuantitatif</strong>, mencakup pengetahuan dan penguasaan matematika dasar</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text"><strong>Tes literasi</strong> mengukur kemampuan berpikir peserta menggunakan konsep, prosedur, fakta, dan alat matematika untuk menyelesaikan masalah sehari-hari. Materi yang diujikan meliputi:</p>
|
||
<ul class="req-sublist">
|
||
<li>Literasi dalam <strong>Bahasa Indonesia</strong></li>
|
||
<li>Literasi dalam <strong>Bahasa Inggris</strong></li>
|
||
<li><strong>Penalaran Matematika</strong></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<p class="mek-text">Penalaran matematika dalam bagian ini bertujuan menilai kemampuan peserta dalam menggunakan konsep dan prosedur matematika untuk menyelesaikan masalah kontekstual, serta mengevaluasi dan merefleksikan informasi yang diperoleh agar dapat digunakan secara efektif dalam kehidupan sehari-hari. Instrumen tes untuk seleksi masuk PTN disusun oleh para ahli di bidang penilaian pendidikan dengan mempertimbangkan aspek teknis pelaksanaan, termasuk alokasi waktu pengerjaan dan tingkat kesulitan soal, sehingga hasil tes dapat mencerminkan kemampuan peserta secara objektif dan terukur.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbt-jadwal">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_jadwal">Jadwal Pendaftaran</h2>
|
||
<div class="timeline-wrap" data-aos="fade-up">
|
||
<div class="timeline-center-line"></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jan_apr">Januari – April</h4><p data-i18n="grp_habisiniseminar_tl_snbt_1">Registrasi Akun SNPMB Siswa</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_mar_apr">Maret – April</h4><p data-i18n="grp_habisiniseminar_tl_snbt_2">Pendaftaran SNBT</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_mar_apr">Maret – April</h4><p data-i18n="grp_habisiniseminar_tl_snbt_3">Pembayaran Biaya UTBK</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card""><h4 data-i18n="grp_habisiniseminar_month_apr_mei">April – Mei</h4><p data-i18n="grp_habisiniseminar_tl_snbt_4">Pelaksanaan UTBK</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_mei">Mei</h4><p data-i18n="grp_habisiniseminar_tl_snbt_5">Pengumuman hasil SNBT</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jun_jul">Juni – Juli</h4><p data-i18n="grp_habisiniseminar_tl_snbt_6">Masa unduh sertifikat UTBK</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbt-biaya">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_biaya">Biaya Pendaftaran & Pendidikan</h2>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendaftaran">Biaya Pendaftaran</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<div class="fee-row-zero"><span data-i18n="grp_habisiniseminar_fee_snbt_utbk">Biaya UTBK</span><span>Rp 200.000,00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendidikan">Biaya Pendidikan</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_fee_desc_ukt">Uang Kuliah Tunggal (UKT) dikenakan kepada seluruh mahasiswa baru Program Diploma dan Sarjana dan <strong>dibayarkan setiap semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_group">Golongan UKT</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>KLP I</td><td>500.000</td></tr>
|
||
<tr><td>KLP II</td><td>1.000.000</td></tr>
|
||
<tr><td>KLP III</td><td>3.200.000</td></tr>
|
||
<tr><td>KLP IV</td><td>3.300.000</td></tr>
|
||
<tr><td>KLP V</td><td>3.450.000</td></tr>
|
||
<tr><td>KLP VI</td><td>5.000.000</td></tr>
|
||
<tr><td>KLP VII</td><td>6.550.000</td></tr>
|
||
<tr><td>KLP VIII</td><td>8.100.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_highlight_snbt">Mahasiswa yang diterima melalui SNBT dengan menggunakan KIP Kuliah akan diverifikasi dan berpeluang mendapatkan pembebasan UKT sesuai ketentuan KIP Kuliah dan UNTAN.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="snbt-beasiswa">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_beasiswa">Beasiswa</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_snbt_beasiswa_desc">Mahasiswa SNBT juga berhak mengajukan berbagai program beasiswa yang tersedia sesuai ketentuan masing-masing penyelenggara.</p>
|
||
<div class="scholarship-slider-wrap">
|
||
<div class="scholarship-slider" id="slider-snbt">
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-id-card" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_kip">Kartu Indonesia Pintar Kuliah</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_kip_desc">KIP-Kuliah ditujukan secara eksklusif hanya untuk yang tidak mampu secara ekonomi</p>
|
||
<a class="btn-detail" href="https://kip-kuliah.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- BCA -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-university" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_bca">Beasiswa BCA</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_bca_desc">Beasiswa dalam bentuk Program Pendidikan Teknik Informatika (PPTI) yang diselenggarakan oleh BCA.</p>
|
||
<a class="btn-detail" href="https://karir.bca.co.id/beasiswa-bca" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- Djarum -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-star" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_djarum">Djarum Beasiswa Plus</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_djarum_desc">Beasiswa pengembangan talenta digital dari Djarum Foundation untuk mahasiswa semester 4 ke atas.</p>
|
||
<a class="btn-detail" href="https://djarumbeasiswaplus.org/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- GenBI -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-hand-holding-heart" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_genbi">Beasiswa Bank Indonesia</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_genbi_desc">Beasiswa dari Bank Indonesia yang memberikan bantuan pendidikan dan pengembangan diri bagi mahasiswa berprestasi.</p>
|
||
<a class="btn-detail" href="https://share.google/OaZZyx5ak6EHKSF8W" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- ADik -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-globe" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_adik">Beasiswa ADik Papua & 3T</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_adik_desc">Beasiswa afirmasi untuk mahasiswa asli Papua, Papua Barat, dan daerah 3T (Terdepan, Terluar, Tertinggal).</p>
|
||
<a class="btn-detail" href="https://adik.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
</div>
|
||
<div class="slider-track"><div class="slider-thumb" id="thumb-snbt"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== SMMPTN PANEL ===================== -->
|
||
<div class="path-panel" id="panel-smmptn">
|
||
<div class="content-section" id="smmptn-general">
|
||
<h2 class="section-h2"><span data-i18n="grp_habisiniseminar_smmptn_title">SMMPTN Barat – Seleksi Mandiri Wilayah Barat</span></h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_info_smmptn">Seleksi Mandiri Masuk Perguruan Tinggi Negeri Wilayah Barat (SMMPTN-Barat) merupakan jalur seleksi mandiri yang diselenggarakan secara bersama oleh sejumlah perguruan tinggi negeri di wilayah barat Indonesia.</p>
|
||
<div class="cta-row">
|
||
<a class="btn-cta btn-yellow" href="https://smmptnbarat.id/" target="_blank"><i class="fas fa-desktop"></i> Website SMMPTN</a>
|
||
<a class="btn-cta btn-yellow" href="https://www.instagram.com/smmptnbaratofficial/" target="_blank"><i class="fab fa-instagram"></i> Instagram SMMPTN</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="smmptn-persyaratan">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_persyaratan">Persyaratan</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_smmptn_persyaratan_list">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta merupakan lulusan SMA/SMK/MA atau sederajat dalam <strong>3 tahun terakhir dari periode saat ini</strong> atau memiliki ijazah Paket C dengan usia <strong>maksimal 25 tahun</strong></span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta dapat memilih <strong>maksimal 2 (dua)</strong> program studi pada satu PTN atau dua PTN yang berbeda, yang tidak harus berada di lokasi UTBK, dengan urutan pilihan menunjukkan prioritas</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Ujian dilaksanakan dalam bentuk <strong>Ujian Tulis Berbasis Komputer (UTBK)</strong></span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="smmptn-mekanisme">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_mekanisme">Mekanisme</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_smmptn_mekanisme_full">
|
||
<p class="mek-text">Mekanisme seleksi SMM PTN-Barat dilaksanakan melalui ujian tertulis berbasis komputer yang dirancang untuk mengukur kemampuan akademik dan kesiapan calon mahasiswa dalam menempuh pendidikan tinggi. Ujian ini menggunakan pendekatan tes terstandar yang berfokus pada kemampuan kognitif, literasi, dan penalaran, sehingga dapat memastikan peserta memiliki kemampuan berpikir kritis, pemecahan masalah, serta kapasitas belajar yang baik. Adapun jenis materi utama dalam ujian ini, sebagai berikut:</p>
|
||
<ul class="mek-check-list">
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text"><strong>Tes Potensi Skolastik (TPS)</strong> mengukur kemampuan kognitif yang diperlukan untuk menunjang keberhasilan dalam pendidikan formal, khususnya di perguruan tinggi. Aspek yang diujikan meliputi:</p>
|
||
<ul class="req-sublist">
|
||
<li>Kemampuan Penalaran Umum</li>
|
||
<li>Kemampuan Kuantitatif yang mencakup pengetahuan dan penguasaan matematika dasar</li>
|
||
<li>Pengetahuan dan Pemahaman umum</li>
|
||
<li>Kemampuan Bacaan dan Menulis</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li><span class="req-check" style="margin-top: 2px"><i class="fas fa-check"></i></span><span><strong>Tes literasi</strong> bertujuan untuk mengukur kemampuan peserta dalam memahami, menggunakan, mengevaluasi, dan merefleksikan berbagai jenis teks guna menyelesaikan permasalahan serta mengembangkan kapasitas individu sebagai warga Indonesia dan warga dunia. Tes ini mencakup literasi dalam Bahasa Indonesia dan literasi dalam Bahasa Inggris.</span></li>
|
||
<li><span class="req-check" style="margin-top: 2px"><i class="fas fa-check"></i></span><span><strong>Penalaran Matematika</strong> mengukur kemampuan berpikir menggunakan konsep, prosedur, fakta, dan alat matematika untuk menyelesaikan masalah sehari-hari pada berbagai jenis konteks yang relevan untuk individu sebagai warga negara Indonesia dan warga negara dunia</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="smmptn-jadwal">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_jadwal">Jadwal Pendaftaran</h2>
|
||
<div class="timeline-wrap" data-aos="fade-up">
|
||
<div class="timeline-center-line"></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_mei_jun">Mei - Juni</h4><p data-i18n="grp_habisiniseminar_tl_smmptn_1">Pendaftaran online</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jun">Juni</h4><p data-i18n="grp_habisiniseminar_tl_smmptn_2">Pelaksanaan UTBK SMMPTN</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jun">Juni</h4><p data-i18n="grp_habisiniseminar_tl_smmptn_3">Pengumuman Hasil Seleksi SMMPTN</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="smmptn-biaya">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_biaya">Biaya Pendaftaran & Pendidikan</h2>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendaftaran">Biaya Pendaftaran</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<div class="fee-row-zero"><span data-i18n="grp_habisiniseminar_fee_smmptn">Biaya Ujian SMMPTN</span><span>Rp 375.000,00</span></div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_smmptn_payment_note">Biaya pendaftaran dibayarkan pada saat proses pendaftaran secara online melalui bank mitra yang telah ditunjuk yaitu Bank Mandiri, Bank BNI, Bank BTN, dan Bank BSI. Biaya pendaftaran yang telah dibayarkan <strong>TIDAK DAPAT</strong> ditarik kembali dengan alasan apa pun.</div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendidikan">Biaya Pendidikan</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_fee_desc_ukt">Uang Kuliah Tunggal (UKT) dikenakan kepada seluruh mahasiswa baru Program Diploma dan Sarjana dan <strong>dibayarkan setiap semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_group">Golongan UKT</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>KLP I</td><td>500.000</td></tr>
|
||
<tr><td>KLP II</td><td>1.000.000</td></tr>
|
||
<tr><td>KLP V</td><td>3.450.000</td></tr>
|
||
<tr><td>KLP VI</td><td>5.000.000</td></tr>
|
||
<tr><td>KLP VII</td><td>6.550.000</td></tr>
|
||
<tr><td>KLP VIII</td><td>8.100.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_highlight_ukt">Besaran UKT terbagi dalam beberapa kelompok yang ditentukan berdasarkan kemampuan ekonomi mahasiswa, orang tua, atau pihak lain yang membiayai mahasiswa.</div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_ipi">Iuran Pengembangan Institusi (IPI)</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_fee_ipi_desc">Iuran Pengembangan Institusi (IPI) dikenakan khusus bagi mahasiswa yang <strong>diterima melalui jalur SMM PTN-Barat dan jalur Mandiri</strong>. Pembayaran IPI dilakukan satu kali selama masa studi dan dapat diangsur hingga <strong>empat semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_ipi_group">Kelompok IPI</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>I</td><td>500.000</td></tr>
|
||
<tr><td>II</td><td>1.000.000</td></tr>
|
||
<tr><td>V</td><td>4.000.000</td></tr>
|
||
<tr><td>VI</td><td>4.000.000</td></tr>
|
||
<tr><td>VII</td><td>4.000.000</td></tr>
|
||
<tr><td>VIII</td><td>4.000.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_ipi_highlight">Mahasiswa yang diterima melalui jalur SNBP dan SNBT tidak dikenakan IPI.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="smmptn-beasiswa">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_beasiswa">Beasiswa</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_smmptn_beasiswa_desc">Berbagai beasiswa tersedia bagi mahasiswa yang diterima melalui jalur SMMPTN-Barat, dapat diajukan setelah proses penerimaan selesai.</p>
|
||
<div class="scholarship-slider-wrap">
|
||
<div class="scholarship-slider" id="slider-smmptn">
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-university" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_bca">Beasiswa BCA</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_bca_desc">Beasiswa dalam bentuk Program Pendidikan Teknik Informatika (PPTI) yang diselenggarakan oleh BCA.</p>
|
||
<a class="btn-detail" href="https://karir.bca.co.id/beasiswa-bca" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- Djarum -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-star" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_djarum">Djarum Beasiswa Plus</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_djarum_desc">Beasiswa pengembangan talenta digital dari Djarum Foundation untuk mahasiswa semester 4 ke atas.</p>
|
||
<a class="btn-detail" href="https://djarumbeasiswaplus.org/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- GenBI -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-hand-holding-heart" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_genbi">Beasiswa Bank Indonesia</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_genbi_desc">Beasiswa dari Bank Indonesia yang memberikan bantuan pendidikan dan pengembangan diri bagi mahasiswa berprestasi.</p>
|
||
<a class="btn-detail" href="https://share.google/OaZZyx5ak6EHKSF8W" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- ADik -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-globe" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_adik">Beasiswa ADik Papua & 3T</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_adik_desc">Beasiswa afirmasi untuk mahasiswa asli Papua, Papua Barat, dan daerah 3T (Terdepan, Terluar, Tertinggal).</p>
|
||
<a class="btn-detail" href="https://adik.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
</div>
|
||
<div class="slider-track"><div class="slider-thumb" id="thumb-smmptn"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== MANDIRI PANEL ===================== -->
|
||
<div class="path-panel" id="panel-mandiri">
|
||
<div class="content-section" id="mandiri-general">
|
||
<h2 class="section-h2"><span data-i18n="grp_habisiniseminar_mandiri_title">Mandiri UNTAN – Seleksi Mandiri Universitas Tanjungpura</span></h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_info_mandiri">Seleksi Mandiri UNTAN merupakan jalur penerimaan mahasiswa baru yang diselenggarakan secara langsung oleh Universitas Tanjungpura.</p>
|
||
<div class="cta-row">
|
||
<a class="btn-cta btn-yellow" href="https://scmb.untan.ac.id/" target="_blank"><i class="fas fa-desktop"></i> Website UNTAN</a>
|
||
<a class="btn-cta btn-yellow" href="https://www.instagram.com/univtanjungpura/" target="_blank"><i class="fab fa-instagram"></i> Instagram UNTAN</a>
|
||
<a class="btn-cta btn-yellow" href="http://helpdesk.untan.ac.id/" target="_blank"><i class="fas fa-info-circle"></i> Helpdesk UNTAN</a>
|
||
</div>
|
||
<div class="chart-card" data-aos="fade-up">
|
||
<h3 data-i18n="grp_habisiniseminar_chart_title">Grafik Peminat dan Daya Tampung per Tahun</h3>
|
||
<canvas id="mandiriChart" height="130"></canvas>
|
||
<div class="chart-legend">
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-navy)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_applicants">Jumlah Peminat</span>
|
||
</span>
|
||
<span style="display: flex; align-items: center; gap: 6px">
|
||
<span class="legend-dot" style="background: var(--brand-yellow)"></span>
|
||
<span class="legend-text" data-i18n="grp_habisiniseminar_chart_legend_capacity">Daya Tampung</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="mandiri-persyaratan">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_persyaratan">Persyaratan</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_mandiri_persyaratan_list">
|
||
<ul class="req-list">
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta merupakan lulusan SMA/SMK/MA atau sederajat dalam <strong>3 tahun terakhir dari periode saat ini</strong> atau memiliki ijazah Paket C dengan usia maksimal 25 tahun</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span><strong>Kelas Pagi dan Internasional</strong> terbuka untuk lulusan tiga tahun terakhir.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span><strong>Kelas Sore dan Malam</strong> tidak dibatasi tahun kelulusan dan usia lulusan Paket C.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Peserta memiliki kondisi kesehatan yang memadai untuk mengikuti proses pembelajaran di perguruan tinggi.</span></li>
|
||
<li><span class="req-check"><i class="fas fa-check"></i></span><span>Sejumlah program studi, seperti Kedokteran dan Pendidikan Jasmani, memiliki persyaratan khusus seperti tidak buta warna yang harus dibuktikan dengan surat keterangan dari dokter spesialis atau pemerintah.</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="mandiri-mekanisme">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_mekanisme">Mekanisme</h2>
|
||
<div data-i18n-html="grp_habisiniseminar_mandiri_mekanisme_full">
|
||
<p class="mek-text">Penerimaan mahasiswa baru Program Diploma dan Sarjana melalui jalur Seleksi Mandiri UNTAN didasarkan pada hasil Ujian Tulis Berbasis Komputer (UTBK) dan/atau tes tambahan sesuai dengan program studi yang dipilih. Berikut adalah rincian ujian dan tes tambahan yang dilakukan:</p>
|
||
<ul class="mek-check-list">
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text"><strong>Ujian Tulis Berbasis Komputer (UTBK)</strong> yang memuat materi berikut:</p>
|
||
<ul class="req-sublist">
|
||
<li>Penalaran verbal</li>
|
||
<li>Kemampuan Kuantitatif</li>
|
||
<li>Pemecahan masalah</li>
|
||
<li>Literasi Bahasa Indonesia</li>
|
||
<li>Literasi Bahasa Inggris</li>
|
||
<li>Numerasi</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="req-list-item--nested">
|
||
<span class="req-check"><i class="fas fa-check"></i></span>
|
||
<div class="req-list-content">
|
||
<p class="req-list-text"><strong>Tes Tambahan:</strong></p>
|
||
<ul class="req-sublist">
|
||
<li>Ujian keterampilan untuk Program Studi Pendidikan Seni Pertunjukan, Pendidikan Jasmani, dan Pendidikan Kepelatihan Olahraga (PKO).</li>
|
||
<li>Tes keterampilan Program Studi Pendidikan Seni Pertunjukan meliputi tes pengetahuan dan keterampilan bidang Ilmu Seni terkait.</li>
|
||
<li>Tes keterampilan Program Studi Pendidikan Jasmani dan Pendidikan Kepelatihan Olahraga (PKO) meliputi pemeriksaan kesehatan dan tes keterampilan motorik.</li>
|
||
<li>Tes psikologi dan wawancara khusus bagi calon mahasiswa Program Studi Kedokteran</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<p class="mek-text">Peserta yang <strong>tidak hadir</strong> pada saat UTBK dan/atau Tes Tambahan <strong>dianggap mengundurkan diri</strong> dari proses seleksi Jalur Mandiri UNTAN. Peserta jalur afirmasi dan/atau jalur prestasi dan penelusuran bakat dilakukan verifikasi melalui wawancara.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="mandiri-jadwal">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_jadwal">Jadwal Pendaftaran</h2>
|
||
<div class="timeline-wrap" data-aos="fade-up">
|
||
<div class="timeline-center-line"></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card" ><h4 data-i18n="grp_habisiniseminar_month_jun">Juni</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_1">Pendaftaran Seleksi Mandiri UNTAN</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jun">Juni</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_2">Pembuatan PIN</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jul">Juli</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_3">Pelaksanaan UTBK Jalur Seleksi Mandiri</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jul">Juli</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_4">Pelaksanaan Tes Tambahan</p></div></div>
|
||
<div class="timeline-row right"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jul">Juli</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_5">Wawancara Kategori Jalur Afirmasi, Prestasi, dan Penelusuran Bakat</p></div></div>
|
||
<div class="timeline-row left"><div class="timeline-dot"></div><div class="timeline-card"><h4 data-i18n="grp_habisiniseminar_month_jul">Juli</h4><p data-i18n="grp_habisiniseminar_tl_mandiri_6">Pengumuman Hasil Seleksi Mandiri</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="mandiri-biaya">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_biaya">Biaya Pendaftaran & Pendidikan</h2>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendaftaran">Biaya Pendaftaran</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<ul class="fee-line-list">
|
||
<li class="fee-line-item"><span class="fee-line-label" data-i18n="grp_habisiniseminar_fee_mandiri_utbk">Biaya Ujian Tulis Berbasis Komputer (UTBK) Jalur Mandiri</span><span class="fee-line-amount">Rp 300.000,00</span></li>
|
||
<li class="fee-line-item"><span class="fee-line-label" data-i18n="grp_habisiniseminar_fee_mandiri_keterampilan">Biaya Tambahan Ujian Keterampilan (Program Studi Pendidikan Seni Pertunjukan, Pendidikan Jasmani, dan Pendidikan Kepelatihan Olahraga (PKO))</span><span class="fee-line-amount">Rp 300.000,00</span></li>
|
||
<li class="fee-line-item"><span class="fee-line-label" data-i18n="grp_habisiniseminar_fee_mandiri_wawancara">Biaya Tambahan Wawancara (Program Studi Kedokteran)</span><span class="fee-line-amount">Rp 150.000,00</span></li>
|
||
<li class="fee-line-item"><span class="fee-line-label" data-i18n="grp_habisiniseminar_fee_mandiri_psikologi">Biaya Tambahan Tes Psikologi (Program Studi Kedokteran)</span><span class="fee-line-amount">Rp 400.000,00</span></li>
|
||
</ul>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_mandiri_payment_note">Seluruh biaya dibayarkan melalui host to host atau teller Bank Kalbar. Penting untuk dicatat bahwa biaya yang sudah dibayarkan tidak dapat diubah atau ditarik kembali dengan alasan apapun.</div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_pendidikan">Biaya Pendidikan</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_fee_desc_ukt">Uang Kuliah Tunggal (UKT) dikenakan kepada seluruh mahasiswa baru Program Diploma dan Sarjana dan <strong>dibayarkan setiap semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_group">Golongan UKT</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>KLP I</td><td>500.000</td></tr>
|
||
<tr><td>KLP II</td><td>1.000.000</td></tr>
|
||
<tr><td>KLP V</td><td>3.450.000</td></tr>
|
||
<tr><td>KLP VI</td><td>5.000.000</td></tr>
|
||
<tr><td>KLP VII</td><td>6.550.000</td></tr>
|
||
<tr><td>KLP VIII</td><td>8.100.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_highlight_ukt">Besaran UKT terbagi dalam beberapa kelompok yang ditentukan berdasarkan kemampuan ekonomi mahasiswa, orang tua, atau pihak lain yang membiayai mahasiswa.</div>
|
||
</div>
|
||
</div>
|
||
<div class="biaya-acc-item">
|
||
<button class="biaya-acc-header" onclick="toggleBiayaAcc(this)"><span data-i18n="grp_habisiniseminar_acc_biaya_ipi">Iuran Pengembangan Institusi (IPI)</span> <i class="fas fa-chevron-up acc-icon"></i></button>
|
||
<div class="biaya-acc-body open">
|
||
<p class="fee-desc" data-i18n-html="grp_habisiniseminar_fee_ipi_desc">Iuran Pengembangan Institusi (IPI) dikenakan khusus bagi mahasiswa yang <strong>diterima melalui jalur SMM PTN-Barat dan jalur Mandiri</strong>. Pembayaran IPI dilakukan satu kali selama masa studi dan dapat diangsur hingga <strong>empat semester</strong>.</p>
|
||
<div class="fee-table-wrap">
|
||
<table class="fee-table">
|
||
<thead><tr><th data-i18n="grp_habisiniseminar_fee_col_ipi_group">Kelompok IPI</th><th data-i18n="grp_habisiniseminar_fee_col_cost">Biaya (Rp)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>I</td><td>500.000</td></tr>
|
||
<tr><td>II</td><td>1.000.000</td></tr>
|
||
<tr><td>V</td><td>4.000.000</td></tr>
|
||
<tr><td>VI</td><td>4.000.000</td></tr>
|
||
<tr><td>VII</td><td>4.000.000</td></tr>
|
||
<tr><td>VIII</td><td>4.000.000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="fee-highlight" data-i18n="grp_habisiniseminar_fee_ipi_highlight">Mahasiswa yang diterima melalui jalur SNBP dan SNBT tidak dikenakan IPI.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section" id="mandiri-beasiswa">
|
||
<h2 class="section-h2" data-i18n="grp_habisiniseminar_section_beasiswa">Beasiswa</h2>
|
||
<p class="info-text" data-i18n="grp_habisiniseminar_mandiri_beasiswa_desc">Mahasiswa jalur Mandiri UNTAN dapat mengakses berbagai program beasiswa yang tersedia sesuai kriteria dan mekanisme pengajuan masing-masing penyelenggara.</p>
|
||
<div class="scholarship-slider-wrap">
|
||
<div class="scholarship-slider" id="slider-mandiri">
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-university" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_bca">Beasiswa BCA</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_bca_desc">Beasiswa dalam bentuk Program Pendidikan Teknik Informatika (PPTI) yang diselenggarakan oleh BCA.</p>
|
||
<a class="btn-detail" href="https://karir.bca.co.id/beasiswa-bca" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- Djarum -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-star" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_djarum">Djarum Beasiswa Plus</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_djarum_desc">Beasiswa pengembangan talenta digital dari Djarum Foundation untuk mahasiswa semester 4 ke atas.</p>
|
||
<a class="btn-detail" href="https://djarumbeasiswaplus.org/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- GenBI -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-hand-holding-heart" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_genbi">Beasiswa Bank Indonesia</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_genbi_desc">Beasiswa dari Bank Indonesia yang memberikan bantuan pendidikan dan pengembangan diri bagi mahasiswa berprestasi.</p>
|
||
<a class="btn-detail" href="https://share.google/OaZZyx5ak6EHKSF8W" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
<!-- ADik -->
|
||
<div class="scholarship-card">
|
||
<div class="scholarship-icon-wrap"><i class="fas fa-globe" style="color: var(--brand-yellow)"></i></div>
|
||
<h4 data-i18n="grp_habisiniseminar_scholar_adik">Beasiswa ADik Papua & 3T</h4>
|
||
<p data-i18n="grp_habisiniseminar_scholar_adik_desc">Beasiswa afirmasi untuk mahasiswa asli Papua, Papua Barat, dan daerah 3T (Terdepan, Terluar, Tertinggal).</p>
|
||
<a class="btn-detail" href="https://adik.kemdiktisaintek.go.id/" target="_blank" data-i18n="grp_habisiniseminar_btn_detail">Lihat Detail</a>
|
||
</div>
|
||
</div>
|
||
<div class="slider-track"><div class="slider-thumb" id="thumb-mandiri"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="faq-section">
|
||
<h2 data-i18n="grp_habisiniseminar_faq_title">Pertanyaan Umum tentang Penerimaan Mahasiswa Baru</h2>
|
||
<p class="faq-sub" data-i18n="grp_habisiniseminar_faq_sub">Temukan jawaban atas pertanyaan Anda</p>
|
||
<div class="faq-list">
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header open" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q1">Bagaimana cara mengetahui hasil seleksi?</span><i class="fas fa-chevron-up faq-icon"></i></button>
|
||
<div class="faq-body open" data-i18n="grp_habisiniseminar_faq_a1">Hasil seleksi diumumkan secara online melalui portal resmi sesuai jadwal yang telah ditentukan.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q2">Apa konsekuensi jika tidak melakukan registrasi ulang atau pembayaran tepat waktu?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n="grp_habisiniseminar_faq_a2">Keterlambatan registrasi atau pembayaran dapat menyebabkan status kelulusan dibatalkan atau dianggap mengundurkan diri.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q3">Apa yang harus dilakukan setelah dinyatakan lulus seleksi?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n="grp_habisiniseminar_faq_a3">Calon mahasiswa wajib melakukan registrasi ulang dan memenuhi seluruh persyaratan administrasi sesuai ketentuan. Informasi lebih lanjut dapat diakses melalui website atau media sosial resmi Informatika UNTAN.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q4">Berapa pilihan peminatan yang tersedia pada program studi ini?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n-html="grp_habisiniseminar_faq_a4">Program studi ini menyediakan 4 peminatan, yaitu Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, Jaringan & Keamanan, serta Sistem Informasi.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q5">Apakah mahasiswa akan mendapatkan pengalaman praktik atau proyek selama kuliah?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n="grp_habisiniseminar_faq_a5">Ya, mahasiswa akan mengikuti berbagai praktikum, tugas proyek, serta kerja kelompok yang dirancang untuk meningkatkan keterampilan teknis dan pemecahan masalah secara nyata.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q6">Bagaimana suasana dan kehidupan kampus di Informatika UNTAN?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n-html="grp_habisiniseminar_faq_a6">Lingkungan kampus mendukung kegiatan akademik dan non-akademik, dengan berbagai organisasi mahasiswa dan komunitas teknologi.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q7">Apakah lulusan Informatika UNTAN memiliki peluang kerja yang baik?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n="grp_habisiniseminar_faq_a7">Lulusan memiliki peluang kerja yang luas di berbagai bidang seperti pengembangan perangkat lunak, analisis data, keamanan jaringan, hingga kewirausahaan di bidang teknologi.</div>
|
||
</div>
|
||
<div class="faq-item" data-aos="fade-up">
|
||
<button class="faq-header" onclick="toggleFaq(this)"><span data-i18n="grp_habisiniseminar_faq_q8">Apakah mahasiswa Informatika UNTAN dapat mengikuti lomba atau kompetisi?</span><i class="fas fa-chevron-down faq-icon"></i></button>
|
||
<div class="faq-body" data-i18n-html="grp_habisiniseminar_faq_a8">Ya, mahasiswa didorong untuk berpartisipasi dalam berbagai lomba dan kompetisi di bidang teknologi, baik tingkat lokal, nasional, maupun internasional.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 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>
|
||
// ============================================================================
|
||
// Constants
|
||
// ============================================================================
|
||
const SELECTION_PATH_IDS = ['snbp', 'snbt', 'smmptn', 'mandiri'];
|
||
const CONTENT_SECTION_KEYS = ['general', 'persyaratan', 'mekanisme', 'jadwal', 'biaya', 'beasiswa'];
|
||
const ADMISSION_CHART_DATA = {
|
||
snbpChart: { applicants: [803, 741, 799], capacity: [25, 25, 30] },
|
||
snbtChart: { applicants: [961, 898, 978], capacity: [45, 45, 76] },
|
||
mandiriChart: { applicants: [573, 367, 397], capacity: [31, 31, 48] },
|
||
};
|
||
const CHART_YEAR_LABELS = ['2023', '2024', '2025'];
|
||
const SLIDER_MIN_THUMB_PERCENT = 20;
|
||
const SCROLL_TO_PATH_HEADER_OFFSET_PX = 20;
|
||
const SCROLL_TO_SECTION_DELAY_MS = 50;
|
||
const SLIDER_INIT_DELAY_MS = 100;
|
||
const ICON_CLASSES = {
|
||
chevronUp: 'fas fa-chevron-up',
|
||
chevronDown: 'fas fa-chevron-down',
|
||
chevronUpAccordion: 'fas fa-chevron-up acc-icon',
|
||
chevronDownAccordion: 'fas fa-chevron-down acc-icon',
|
||
chevronUpFaq: 'fas fa-chevron-up faq-icon',
|
||
chevronDownFaq: 'fas fa-chevron-down faq-icon',
|
||
sidebarChevronUp: 'fas fa-chevron-up chevron',
|
||
sidebarChevronDown: 'fas fa-chevron-down chevron',
|
||
};
|
||
|
||
// ============================================================================
|
||
// Application state
|
||
// ============================================================================
|
||
let activePathId = 'snbp';
|
||
const initializedSliderKeys = new Set();
|
||
|
||
// ============================================================================
|
||
// DOM helpers
|
||
// ============================================================================
|
||
function findElement(elementId) { return document.getElementById(elementId); }
|
||
function findAll(selector, rootElement) { return (rootElement || document).querySelectorAll(selector); }
|
||
function hasOpenClass(element) { return element.classList.contains('open'); }
|
||
function buildPathElementId(pathId, suffix) { return pathId + '-' + suffix; }
|
||
|
||
// ============================================================================
|
||
// Layout
|
||
// ============================================================================
|
||
function syncHeaderHeightVariable() {
|
||
const headerElement = findElement('site-header');
|
||
if (!headerElement) return;
|
||
document.documentElement.style.setProperty('--header-h', headerElement.offsetHeight + 'px');
|
||
}
|
||
|
||
// ============================================================================
|
||
// Sidebar groups
|
||
// ============================================================================
|
||
function setSidebarGroupExpanded(pathId, shouldExpand) {
|
||
const toggleButton = findElement('btn-' + pathId);
|
||
const submenu = findElement('sub-' + pathId);
|
||
const chevron = toggleButton.querySelector('.chevron');
|
||
toggleButton.classList.toggle('active', shouldExpand);
|
||
submenu.classList.toggle('open', shouldExpand);
|
||
chevron.className = shouldExpand ? ICON_CLASSES.sidebarChevronUp : ICON_CLASSES.sidebarChevronDown;
|
||
}
|
||
function collapseSidebarGroup(pathId) { setSidebarGroupExpanded(pathId, false); }
|
||
function expandSidebarGroup(pathId) { setSidebarGroupExpanded(pathId, true); }
|
||
function toggleGroup(targetPathId) {
|
||
const targetSubmenu = findElement('sub-' + targetPathId);
|
||
const isTargetAlreadyOpen = hasOpenClass(targetSubmenu);
|
||
SELECTION_PATH_IDS.forEach(function (pathId) {
|
||
if (pathId === targetPathId) { setSidebarGroupExpanded(pathId, !isTargetAlreadyOpen); return; }
|
||
collapseSidebarGroup(pathId);
|
||
});
|
||
}
|
||
|
||
// ============================================================================
|
||
// Accordion
|
||
// ============================================================================
|
||
function setAccordionChevron(iconElement, isExpanded, iconSet) {
|
||
iconElement.className = isExpanded ? iconSet.expanded : iconSet.collapsed;
|
||
}
|
||
function collapseAccordionHeader(headerElement, iconSet) {
|
||
headerElement.classList.remove('open');
|
||
headerElement.nextElementSibling.classList.remove('open');
|
||
setAccordionChevron(headerElement.querySelector(iconSet.selector), false, iconSet);
|
||
}
|
||
function expandAccordionHeader(headerElement, iconSet) {
|
||
headerElement.classList.add('open');
|
||
headerElement.nextElementSibling.classList.add('open');
|
||
setAccordionChevron(headerElement.querySelector(iconSet.selector), true, iconSet);
|
||
}
|
||
const REQUIREMENTS_ACCORDION_ICONS = { selector: '.acc-icon', expanded: ICON_CLASSES.chevronUpAccordion, collapsed: ICON_CLASSES.chevronDownAccordion };
|
||
const FAQ_ACCORDION_ICONS = { selector: '.faq-icon', expanded: ICON_CLASSES.chevronUpFaq, collapsed: ICON_CLASSES.chevronDownFaq };
|
||
|
||
function toggleExclusiveAccordion(clickedHeader) {
|
||
const isCurrentlyOpen = hasOpenClass(clickedHeader);
|
||
if (isCurrentlyOpen) {
|
||
collapseAccordionHeader(clickedHeader, REQUIREMENTS_ACCORDION_ICONS);
|
||
} else {
|
||
expandAccordionHeader(clickedHeader, REQUIREMENTS_ACCORDION_ICONS);
|
||
}
|
||
}
|
||
function toggleIndependentFeeAccordion(clickedHeader) {
|
||
const bodyElement = clickedHeader.nextElementSibling;
|
||
const iconElement = clickedHeader.querySelector('.acc-icon');
|
||
const shouldExpand = !hasOpenClass(bodyElement);
|
||
bodyElement.classList.toggle('open', shouldExpand);
|
||
setAccordionChevron(iconElement, shouldExpand, REQUIREMENTS_ACCORDION_ICONS);
|
||
}
|
||
function toggleFaqItem(clickedHeader) {
|
||
const bodyElement = clickedHeader.nextElementSibling;
|
||
const iconElement = clickedHeader.querySelector('.faq-icon');
|
||
const shouldExpand = !hasOpenClass(clickedHeader);
|
||
clickedHeader.classList.toggle('open', shouldExpand);
|
||
bodyElement.classList.toggle('open', shouldExpand);
|
||
setAccordionChevron(iconElement, shouldExpand, FAQ_ACCORDION_ICONS);
|
||
}
|
||
|
||
// ============================================================================
|
||
// Horizontal slider
|
||
// ============================================================================
|
||
function getThumbWidthPercent(sliderElement) {
|
||
const visibleRatio = sliderElement.clientWidth / sliderElement.scrollWidth;
|
||
return Math.max(SLIDER_MIN_THUMB_PERCENT, visibleRatio * 100);
|
||
}
|
||
function getHorizontalScrollProgress(sliderElement) {
|
||
const maxScrollLeft = sliderElement.scrollWidth - sliderElement.clientWidth;
|
||
if (maxScrollLeft <= 0) return 0;
|
||
return sliderElement.scrollLeft / maxScrollLeft;
|
||
}
|
||
function syncSliderThumbPosition(sliderElement, thumbElement) {
|
||
const thumbWidthPercent = getThumbWidthPercent(sliderElement);
|
||
const scrollProgress = getHorizontalScrollProgress(sliderElement);
|
||
thumbElement.style.width = thumbWidthPercent + '%';
|
||
thumbElement.style.marginLeft = scrollProgress * (100 - thumbWidthPercent) + '%';
|
||
}
|
||
function getScrollRatioFromClientX(clientX, trackElement) {
|
||
const trackRect = trackElement.getBoundingClientRect();
|
||
return Math.max(0, Math.min(1, (clientX - trackRect.left) / trackRect.width));
|
||
}
|
||
function scrollSliderToClientX(clientX, sliderElement, trackElement) {
|
||
const scrollRatio = getScrollRatioFromClientX(clientX, trackElement);
|
||
const maxScrollLeft = sliderElement.scrollWidth - sliderElement.clientWidth;
|
||
sliderElement.scrollTo({ left: scrollRatio * maxScrollLeft, behavior: 'smooth' });
|
||
}
|
||
function bindSliderDragWithMouse(sliderElement) {
|
||
let isDragging = false, dragStartX = 0, dragStartScrollLeft = 0;
|
||
sliderElement.addEventListener('mousedown', function (mouseEvent) {
|
||
if (mouseEvent.button !== 0) return;
|
||
if (mouseEvent.target.closest('a')) return;
|
||
isDragging = true; dragStartX = mouseEvent.pageX; dragStartScrollLeft = sliderElement.scrollLeft;
|
||
sliderElement.classList.add('dragging'); sliderElement.style.scrollBehavior = 'auto';
|
||
});
|
||
document.addEventListener('mouseup', function () {
|
||
if (!isDragging) return; isDragging = false; sliderElement.style.scrollBehavior = 'smooth';
|
||
setTimeout(function () { sliderElement.classList.remove('dragging'); }, 50);
|
||
});
|
||
document.addEventListener('mousemove', function (mouseEvent) {
|
||
if (!isDragging) return; mouseEvent.preventDefault();
|
||
sliderElement.scrollLeft = dragStartScrollLeft - (mouseEvent.pageX - dragStartX);
|
||
});
|
||
}
|
||
function bindSliderDragWithTouch(sliderElement) {
|
||
let touchStartX = 0, touchStartScrollLeft = 0;
|
||
sliderElement.addEventListener('touchstart', function (touchEvent) {
|
||
touchStartX = touchEvent.touches[0].clientX; touchStartScrollLeft = sliderElement.scrollLeft;
|
||
sliderElement.classList.add('dragging');
|
||
}, { passive: true });
|
||
sliderElement.addEventListener('touchmove', function (touchEvent) {
|
||
sliderElement.scrollLeft = touchStartScrollLeft + (touchStartX - touchEvent.touches[0].clientX);
|
||
}, { passive: true });
|
||
sliderElement.addEventListener('touchend', function () { sliderElement.classList.remove('dragging'); }, { passive: true });
|
||
}
|
||
function bindThumbDragHandlers(thumbElement, sliderElement, trackElement) {
|
||
function startDrag(getClientX) {
|
||
return function onDragStart(pointerEvent) {
|
||
pointerEvent.preventDefault(); pointerEvent.stopPropagation();
|
||
thumbElement.classList.add('dragging');
|
||
function onDragMove(moveEvent) { scrollSliderToClientX(getClientX(moveEvent), sliderElement, trackElement); }
|
||
function onDragEnd() {
|
||
thumbElement.classList.remove('dragging');
|
||
document.removeEventListener('mousemove', onDragMove); document.removeEventListener('mouseup', onDragEnd);
|
||
document.removeEventListener('touchmove', onDragMove); document.removeEventListener('touchend', onDragEnd);
|
||
}
|
||
document.addEventListener('mousemove', onDragMove); document.addEventListener('mouseup', onDragEnd);
|
||
document.addEventListener('touchmove', onDragMove, { passive: true }); document.addEventListener('touchend', onDragEnd);
|
||
};
|
||
}
|
||
thumbElement.addEventListener('mousedown', startDrag(function (e) { return e.clientX; }));
|
||
thumbElement.addEventListener('touchstart', startDrag(function (e) { return e.touches[0].clientX; }), { passive: false });
|
||
}
|
||
function bindTrackClickToScroll(trackElement, thumbElement, sliderElement) {
|
||
trackElement.addEventListener('click', function (clickEvent) {
|
||
if (clickEvent.target === thumbElement) return;
|
||
scrollSliderToClientX(clickEvent.clientX, sliderElement, trackElement);
|
||
});
|
||
}
|
||
function initializeHorizontalSlider(sliderId, thumbId) {
|
||
const sliderElement = findElement(sliderId);
|
||
const thumbElement = findElement(thumbId);
|
||
if (!sliderElement || !thumbElement) return;
|
||
const trackElement = thumbElement.parentElement;
|
||
sliderElement.addEventListener('scroll', function () { syncSliderThumbPosition(sliderElement, thumbElement); }, { passive: true });
|
||
syncSliderThumbPosition(sliderElement, thumbElement);
|
||
bindSliderDragWithMouse(sliderElement);
|
||
bindSliderDragWithTouch(sliderElement);
|
||
bindThumbDragHandlers(thumbElement, sliderElement, trackElement);
|
||
bindTrackClickToScroll(trackElement, thumbElement, sliderElement);
|
||
}
|
||
function initializeScholarshipSliderWhenNeeded(pathId) {
|
||
const sliderKey = 'slider-' + pathId;
|
||
if (initializedSliderKeys.has(sliderKey)) return;
|
||
initializeHorizontalSlider(sliderKey, 'thumb-' + pathId);
|
||
initializedSliderKeys.add(sliderKey);
|
||
}
|
||
|
||
// ============================================================================
|
||
// Path navigation
|
||
// ============================================================================
|
||
function clearSidebarLinkHighlights() {
|
||
findAll('.sidebar-direct-links a').forEach(function (linkElement) { linkElement.classList.remove('active'); });
|
||
}
|
||
function deactivateAllPathPanels() {
|
||
SELECTION_PATH_IDS.forEach(function (pathId) {
|
||
findElement('panel-' + pathId).classList.remove('active');
|
||
findAll('a', findElement('sub-' + pathId)).forEach(function (linkElement) { linkElement.classList.remove('active'); });
|
||
clearSidebarLinkHighlights();
|
||
collapseSidebarGroup(pathId);
|
||
});
|
||
}
|
||
function activatePathPanel(pathId) {
|
||
findElement('panel-' + pathId).classList.add('active');
|
||
expandSidebarGroup(pathId);
|
||
const firstSidebarLink = findElement('sub-' + pathId).querySelector('a');
|
||
if (firstSidebarLink) firstSidebarLink.classList.add('active');
|
||
setTimeout(function () { initializeScholarshipSliderWhenNeeded(pathId); }, SLIDER_INIT_DELAY_MS);
|
||
}
|
||
function scrollToPathSelectionHeader() {
|
||
const headerElement = findElement('info-jalur-header');
|
||
window.scrollTo({ top: headerElement.offsetTop - SCROLL_TO_PATH_HEADER_OFFSET_PX, behavior: 'smooth' });
|
||
}
|
||
function switchPath(pathId) {
|
||
if (activePathId === pathId) return;
|
||
activePathId = pathId;
|
||
localStorage.setItem('selectedPath', pathId);
|
||
deactivateAllPathPanels();
|
||
activatePathPanel(pathId);
|
||
scrollToPathSelectionHeader();
|
||
}
|
||
function syncSidebarLinkForSection(pathId, sectionId) {
|
||
findAll('a', findElement('sub-' + pathId)).forEach(function (linkElement) {
|
||
linkElement.classList.toggle('active', linkElement.dataset.path === pathId && linkElement.dataset.section === sectionId);
|
||
});
|
||
}
|
||
function scrollToPathContentSection(pathId, sectionId) {
|
||
const sectionElement = findElement(buildPathElementId(pathId, sectionId));
|
||
if (!sectionElement) return;
|
||
setTimeout(function () { sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, SCROLL_TO_SECTION_DELAY_MS);
|
||
}
|
||
function goTo(pathId, sectionId) {
|
||
if (activePathId !== pathId) switchPath(pathId);
|
||
syncSidebarLinkForSection(pathId, sectionId);
|
||
scrollToPathContentSection(pathId, sectionId);
|
||
}
|
||
|
||
// ============================================================================
|
||
// Admission charts
|
||
// ============================================================================
|
||
function buildBarDataset(label, values, color) {
|
||
return { label: label, data: values, backgroundColor: color, borderRadius: 5, barPercentage: 0.45, categoryPercentage: 0.6 };
|
||
}
|
||
const CHART_LABEL_COLORS = { applicants: '#003150', capacity: '#003150' };
|
||
function getChartYearLabels(chartData) { return CHART_YEAR_LABELS.slice(0, chartData.applicants.length); }
|
||
function getChartYAxisMax(chartData) {
|
||
const peakValue = Math.max(...chartData.applicants, ...chartData.capacity);
|
||
return Math.ceil((peakValue * 1.15) / 100) * 100;
|
||
}
|
||
function getChartYAxisStepSize(axisMax) {
|
||
if (axisMax <= 200) return 50;
|
||
if (axisMax <= 500) return 100;
|
||
return 250;
|
||
}
|
||
const BAR_VALUE_LABEL_PLUGIN = {
|
||
id: 'barValueLabels',
|
||
afterDatasetsDraw: function (chartInstance) {
|
||
const canvasContext = chartInstance.ctx;
|
||
chartInstance.data.datasets.forEach(function (dataset, datasetIndex) {
|
||
const labelColor = datasetIndex === 0 ? CHART_LABEL_COLORS.applicants : CHART_LABEL_COLORS.capacity;
|
||
chartInstance.getDatasetMeta(datasetIndex).data.forEach(function (barElement, barIndex) {
|
||
const barValue = dataset.data[barIndex];
|
||
if (barValue == null || barValue === 'x') return;
|
||
canvasContext.save();
|
||
canvasContext.fillStyle = labelColor;
|
||
canvasContext.font = 'bold 11px Plus Jakarta Sans, sans-serif';
|
||
canvasContext.textAlign = 'center';
|
||
canvasContext.textBaseline = 'bottom';
|
||
canvasContext.fillText(String(barValue), barElement.x, barElement.y - 5);
|
||
canvasContext.restore();
|
||
});
|
||
});
|
||
},
|
||
};
|
||
function buildAdmissionChartOptions(chartData) {
|
||
const yAxisMax = getChartYAxisMax(chartData);
|
||
return {
|
||
responsive: true,
|
||
layout: { padding: { top: 22 } },
|
||
plugins: { legend: { display: false }, tooltip: { callbacks: { label: function (tooltipItem) { return ' ' + tooltipItem.dataset.label + ': ' + tooltipItem.parsed.y; } } } },
|
||
scales: {
|
||
y: { beginAtZero: true, max: yAxisMax, ticks: { stepSize: getChartYAxisStepSize(yAxisMax), color: '#888', font: { size: 11 } }, grid: { color: '#f0f0f0' } },
|
||
x: { grid: { display: false }, ticks: { color: '#666', font: { size: 12 } } },
|
||
},
|
||
};
|
||
}
|
||
function renderAdmissionChart(canvasId, chartData) {
|
||
const canvasElement = findElement(canvasId);
|
||
if (!canvasElement) return;
|
||
const yearLabels = getChartYearLabels(chartData);
|
||
const applicantsLabel = 'Jumlah Peminat';
|
||
const capacityLabel = 'Daya Tampung';
|
||
new Chart(canvasElement.getContext('2d'), {
|
||
type: 'bar',
|
||
data: { labels: yearLabels, datasets: [buildBarDataset(applicantsLabel, chartData.applicants, '#003150'), buildBarDataset(capacityLabel, chartData.capacity, '#FDB913')] },
|
||
options: buildAdmissionChartOptions(chartData),
|
||
});
|
||
}
|
||
function renderAllAdmissionCharts() {
|
||
Chart.register(BAR_VALUE_LABEL_PLUGIN);
|
||
Object.entries(ADMISSION_CHART_DATA).forEach(function (entry) { renderAdmissionChart(entry[0], entry[1]); });
|
||
}
|
||
|
||
// ============================================================================
|
||
// Scroll observer — highlight sidebar saat section masuk viewport
|
||
// ============================================================================
|
||
function parseSectionElementId(sectionElementId) {
|
||
const idParts = sectionElementId.split('-');
|
||
return { pathId: idParts[0], sectionId: idParts.slice(1).join('-') };
|
||
}
|
||
function syncSidebarLinkFromSectionId(sectionElementId) {
|
||
const { pathId, sectionId } = parseSectionElementId(sectionElementId);
|
||
if (pathId !== activePathId) return;
|
||
findAll('a', findElement('sub-' + pathId)).forEach(function (linkElement) {
|
||
linkElement.classList.toggle('active', linkElement.dataset.section === sectionId);
|
||
});
|
||
}
|
||
function registerSectionScrollObserver() {
|
||
const observer = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (entry) { if (entry.isIntersecting) { syncSidebarLinkFromSectionId(entry.target.id); } });
|
||
}, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });
|
||
SELECTION_PATH_IDS.forEach(function (pathId) {
|
||
CONTENT_SECTION_KEYS.forEach(function (sectionId) {
|
||
const sectionElement = findElement(buildPathElementId(pathId, sectionId));
|
||
if (sectionElement) observer.observe(sectionElement);
|
||
});
|
||
});
|
||
}
|
||
|
||
// ============================================================================
|
||
// Public API
|
||
// ============================================================================
|
||
function exposePublicHandlers() {
|
||
window.toggleGroup = toggleGroup;
|
||
window.switchPath = switchPath;
|
||
window.goTo = goTo;
|
||
window.toggleAcc = toggleExclusiveAccordion;
|
||
window.toggleBiayaAcc = toggleIndependentFeeAccordion;
|
||
window.toggleFaq = toggleFaqItem;
|
||
}
|
||
|
||
// ============================================================================
|
||
// Simpan state jalur aktif ke localStorage
|
||
// ============================================================================
|
||
function restoreLastSelectedPath() {
|
||
const savedPath = localStorage.getItem('selectedPath');
|
||
if (savedPath && SELECTION_PATH_IDS.includes(savedPath)) {
|
||
activePathId = savedPath;
|
||
deactivateAllPathPanels();
|
||
activatePathPanel(savedPath);
|
||
setTimeout(function() {
|
||
const headerElement = findElement('info-jalur-header');
|
||
if (headerElement) {
|
||
headerElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}, 100);
|
||
} else {
|
||
activePathId = 'snbp';
|
||
deactivateAllPathPanels();
|
||
activatePathPanel('snbp');
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// Bootstrap
|
||
// ============================================================================
|
||
function bootstrapApplication() {
|
||
exposePublicHandlers();
|
||
syncHeaderHeightVariable();
|
||
window.addEventListener('resize', syncHeaderHeightVariable);
|
||
renderAllAdmissionCharts();
|
||
registerSectionScrollObserver();
|
||
initializeHorizontalSlider('pathCardsSlider', 'thumb-path');
|
||
restoreLastSelectedPath();
|
||
|
||
initializeScholarshipSliderWhenNeeded(activePathId);
|
||
AOS.init({ once: true, duration: 600, offset: 60 });
|
||
}
|
||
|
||
bootstrapApplication();
|
||
</script>
|
||
|
||
<script src="../../assets/global/localization.js"></script>
|
||
</body>
|
||
</html> |