forked from izu/student-web-if-development-kit
3092 lines
164 KiB
HTML
3092 lines
164 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>Group 05 – M4N1FEST | 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="style.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<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;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@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">
|
||
<!-- 1. Custom Hero Container (Full Width, replacing top section) -->
|
||
<section class="hero-custom custom-hero-m4n1fest">
|
||
<div class="custom-hero-container">
|
||
<div class="custom-hero-label">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
|
||
<path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
|
||
<path d="M6 12v5c3 3 9 3 12 0v-5"/>
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_hero_label">PROGRAM STUDI INFORMATIKA · UNTAN PONTIANAK</span>
|
||
</div>
|
||
<h1 class="custom-hero-title">
|
||
<span data-i18n="grp_m4n1fest_hero_title_1">Alumni</span><br>
|
||
<span class="custom-text-yellow custom-serif" data-i18n="grp_m4n1fest_hero_title_2">Informatika</span>
|
||
</h1>
|
||
<h2 class="custom-hero-subtitle custom-serif" data-i18n="grp_m4n1fest_hero_subtitle">UNTAN Pontianak</h2>
|
||
|
||
<p class="custom-hero-desc" data-i18n="grp_m4n1fest_hero_desc">
|
||
Lulusan Informatika UNTAN kini berkarya di berbagai penjuru Indonesia dan dunia. Temukan jejak mereka, inspirasi dari perjalanan mereka, dan jadilah bagian dari jaringan ini.
|
||
</p>
|
||
|
||
<div class="custom-hero-buttons">
|
||
<a href="#database" class="custom-btn-primary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_hero_btn_stats">Lihat Statistik Alumni</span>
|
||
</a>
|
||
<a href="#kontribusi" class="custom-btn-secondary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_hero_btn_join">Gabung Grup IKA</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="custom-stats">
|
||
<div class="custom-stat-box">
|
||
<div class="custom-stat-num custom-serif">212</div>
|
||
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_alumni">TOTAL ALUMNI</div>
|
||
<div class="custom-stat-desc" style="font-size: 0.65rem; color: #a1a1aa; margin-top: 4px; line-height: 1.35; font-weight: normal; font-family: sans-serif;" data-i18n="grp_m4n1fest_hero_stat_alumni_desc">data diperoleh dari alumni terdata di tracer study</div>
|
||
</div>
|
||
<div class="custom-stat-box">
|
||
<div class="custom-stat-num custom-serif">22</div>
|
||
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_batch">ANGKATAN</div>
|
||
</div>
|
||
<div class="custom-stat-box" style="border-right: none;">
|
||
<div class="custom-stat-num custom-serif">180</div>
|
||
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ MAIN LAYOUT ══ -->
|
||
<div class="container layout" style="display: block; width: 100%;">
|
||
<div style="width: 100%;">
|
||
|
||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||
<div id="assignment-body" class="article-body" style="max-width: 1100px; margin: 0 auto;">
|
||
<!-- ─────────────────────────────────────────
|
||
2. HIGH ACHIEVERS
|
||
───────────────────────────────────────── -->
|
||
<section id="achievers" style="padding: 56px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_achievers">High Achievers</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_achievers">Alumni <em>Informatika</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0" data-i18n="grp_m4n1fest_sub_achievers">
|
||
Mereka membuktikan bahwa lulusan Informatika UNTAN mampu
|
||
bersaing dan berkarya di level tertinggi.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="achiever-grid">
|
||
<!-- Card 1 -->
|
||
<div class="achiever-card rv d1">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle">
|
||
<img src="./assets/izhan.jpg" alt="Izhan Fakhruzi">
|
||
</div>
|
||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach1_batch">Angkatan 2005</div>
|
||
<div class="achiever-name">Izhan Fakhruzi</div>
|
||
<div class="achiever-pos" data-i18n="grp_m4n1fest_ach1_pos">
|
||
Dosen Tetap, Univ Muhammadiyah Pontianak & Peneliti, Universidad de Granada
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li data-i18n="grp_m4n1fest_ach1_ach1">M.Sc. Computer Engineering, Marmara University</li>
|
||
<li data-i18n="grp_m4n1fest_ach1_ach2">Ph.D. in Info & Comm Tech, Universidad de Granada</li>
|
||
<li data-i18n="grp_m4n1fest_ach1_ach3">Berpengalaman dalam penelitian AI lintas negara</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="achiever-card rv d2">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle">
|
||
<img src="./assets/charles.jpg" alt="Charles Darwis Hariman">
|
||
</div>
|
||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach2_batch">Informatika UNTAN</div>
|
||
<div class="achiever-name">Charles Darwis Hariman</div>
|
||
<div class="achiever-pos" data-i18n="grp_m4n1fest_ach2_pos">
|
||
Software Developer, Traxpay GmbH, Jerman
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li data-i18n="grp_m4n1fest_ach2_ach1">M.Sc. Computer Science, Saarland University</li>
|
||
<li data-i18n="grp_m4n1fest_ach2_ach2">Berkarir di industri FinTech Eropa</li>
|
||
<li data-i18n="grp_m4n1fest_ach2_ach3">Pakar sistem pembayaran digital & integrasi ERP</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="achiever-card rv d3">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle">
|
||
<img src="./assets/dona.jpg" alt="Dona Pramana Pura">
|
||
</div>
|
||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach3_batch">Angkatan 2009</div>
|
||
<div class="achiever-name">Dona Pramana Pura</div>
|
||
<div class="achiever-pos" data-i18n="grp_m4n1fest_ach3_pos">
|
||
Product Manager, CX-Oriented Tech, Ai Tech
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li data-i18n="grp_m4n1fest_ach3_ach1">AI Practitioner berfokus pada Voice AI</li>
|
||
<li data-i18n="grp_m4n1fest_ach3_ach2">Merancang produk teknologi berbasis Customer Experience</li>
|
||
<li data-i18n="grp_m4n1fest_ach3_ach3">Inovator solusi AI di berbagai platform</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
3. CAREER PATH
|
||
───────────────────────────────────────── -->
|
||
<section id="career">
|
||
<div class="section-inner">
|
||
<div class="two-col">
|
||
<!-- left: bars -->
|
||
<div class="rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_career">Career Path</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_career">Alumni Bekerja di <em>Mana?</em></h2>
|
||
<p class="sec-sub" style="margin-bottom: 24px" data-i18n="grp_m4n1fest_sub_career">
|
||
Sebaran industri tempat alumni berkarir.
|
||
</p>
|
||
|
||
<div class="industry-row rv d1">
|
||
<div class="industry-labels">
|
||
<span class="industry-label" data-i18n="grp_m4n1fest_career_gov"
|
||
>Instansi pemerintah</span
|
||
>
|
||
<span class="industry-pct">29.41%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 29.41%;
|
||
background: linear-gradient(90deg, #1a3a6b, #3b6cc7);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d2">
|
||
<div class="industry-labels">
|
||
<span class="industry-label" data-i18n="grp_m4n1fest_career_private">Perusahaan swasta</span>
|
||
<span class="industry-pct">23.53%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 23.53%;
|
||
background: linear-gradient(90deg, #2352a0, #3b6cc7);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d2">
|
||
<div class="industry-labels">
|
||
<span class="industry-label" data-i18n="grp_m4n1fest_career_entrepreneur">Wiraswasta/perusahaan sendiri</span>
|
||
<span class="industry-pct">14.71%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 14.71%;
|
||
background: linear-gradient(90deg, #3b6cc7, #5b8ce8);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d3">
|
||
<div class="industry-labels">
|
||
<span class="industry-label" data-i18n="grp_m4n1fest_career_soes">BUMN/BUMD</span>
|
||
<span class="industry-pct">5.88%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 5.88%;
|
||
background: linear-gradient(90deg, #f5b800, #ffda5a);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d3">
|
||
<div class="industry-labels">
|
||
<span class="industry-label" data-i18n="grp_m4n1fest_career_ngo"
|
||
>Organisasi non-profit/LSM</span
|
||
>
|
||
<span class="industry-pct">2.94%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 2.94%;
|
||
background: linear-gradient(90deg, #059669, #34d399);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="note-tiny" data-i18n="grp_m4n1fest_career_note">
|
||
* Data diperoleh dari data Tracer Study Untan. Diperbarui terakhir Mei 2026.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- right: company logos -->
|
||
<div class="rv d2">
|
||
<div
|
||
style="
|
||
font-size: 0.76rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: #6b7280;
|
||
margin-bottom: 14px;
|
||
"
|
||
data-i18n="grp_m4n1fest_career_logo_title"
|
||
>
|
||
Perusahaan Tempat Alumni Berkarir
|
||
</div>
|
||
<div class="logo-grid">
|
||
<div class="logo-card">
|
||
<img src="./assets/BCA.png" alt="Logo BCA" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bca">BCA</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/bri.png" alt="Logo BRI" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bri">BRI</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/Telkom.jpg" alt="Logo Telkom Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkom">Telkom Indonesia</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/pln.jpg" alt="Logo PLN" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_pln">PLN</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/Indofood.png" alt="Logo Indofood Fortuna" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_indofood">Indofood Fortuna</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/astra.webp" alt="Logo Astra Daihatsu" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_astra">Astra Daihatsu</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/unilever-logo.png" alt="Logo Unilever" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_unilever">Unilever</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/grab.png" alt="Logo Grab" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_grab">Grab</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/telkomsel.jpg" alt="Logo Telkomsel" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkomsel">Telkomsel</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/garuda_indonesia.jpg" alt="Logo Garuda Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_garuda">Garuda Indonesia</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<img src="./assets/Bulog-Logo.png" alt="Logo Perum Bulog" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bulog">Perum BULOG</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #f3f4f6; color: #4b5563"
|
||
>
|
||
180
|
||
</div>
|
||
<span class="logo-name" style="color: #6b7280" data-i18n="grp_m4n1fest_logo_others">Lainnya</span>
|
||
</div>
|
||
</div>
|
||
<p class="note-tiny" style="margin-top: 24px;" data-i18n="grp_m4n1fest_career_note">
|
||
* Data diperoleh dari data Tracer Study Untan. Diperbarui terakhir Mei 2026.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
4. SKILL DISTRIBUTION
|
||
───────────────────────────────────────── -->
|
||
<section id="skill" style="padding: 52px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_skill">Skill Distribution</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_skill">Skill yang <em>Dikuasai Alumni</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0" data-i18n="grp_m4n1fest_sub_skill">
|
||
Distribusi skill berdasarkan data form kontribusi alumni —
|
||
gambaran kompetensi nyata lulusan Informatika UNTAN.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="two-col">
|
||
<!-- bars: skeleton selalu tampil, garis biru terisi otomatis dari data approved -->
|
||
<div class="rv" id="skill-bars-container">
|
||
|
||
<!-- Web Development -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Web Development</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-web-development" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-web-development">—</span>
|
||
</div>
|
||
<!-- Python / Data Science -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Python / Data Science</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-python-data-science" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-python-data-science">—</span>
|
||
</div>
|
||
<!-- Mobile Development -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Mobile Development</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-mobile-development" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-mobile-development">—</span>
|
||
</div>
|
||
<!-- UI/UX Design -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">UI/UX Design</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-uiux-design" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-uiux-design">—</span>
|
||
</div>
|
||
<!-- Networking / DevOps -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Networking / DevOps</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-networking-devops" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-networking-devops">—</span>
|
||
</div>
|
||
<!-- Cybersecurity -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Cybersecurity</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-cybersecurity" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-cybersecurity">—</span>
|
||
</div>
|
||
<!-- Machine Learning / AI -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Machine Learning / AI</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-machine-learning-ai" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-machine-learning-ai">—</span>
|
||
</div>
|
||
<!-- Database -->
|
||
<div class="skill-row">
|
||
<span class="skill-label">Database</span>
|
||
<div class="skill-track"><div class="skill-fill" id="bar-database" style="width:0%;transition:width 0.8s ease"></div></div>
|
||
<span class="skill-pct" id="pct-database">—</span>
|
||
</div>
|
||
|
||
<!-- Status note -->
|
||
<p id="skill-data-note" style="font-size:0.72rem;color:#9ca3af;margin-top:14px;text-align:right;font-style:italic;">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
style="display:inline-block;vertical-align:middle;margin-right:3px;animation:spin 1s linear infinite" id="skill-note-spinner">
|
||
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
||
</svg>
|
||
<span id="skill-note-text">Memuat data skill alumni...</span>
|
||
</p>
|
||
</div>
|
||
<!-- stat box -->
|
||
<div class="rv d2" style="height: 100%;">
|
||
<div class="skill-stat-box" style="height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;">
|
||
<div class="skill-stat-title" style="font-size: 1.35rem; margin-bottom: 10px; color: var(--gold-lt);" data-i18n="grp_m4n1fest_skill_not_listed">
|
||
Belum Terdata di Sini?
|
||
</div>
|
||
<p class="skill-stat-sub" style="margin-bottom: 20px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); line-height: 1.7;" data-i18n="grp_m4n1fest_skill_not_listed_desc">
|
||
Bantu kami melengkapi database skill alumni Informatika UNTAN. Kontribusikan data keahlian Anda untuk memetakan potensi nyata dari lulusan di berbagai sektor industri.
|
||
</p>
|
||
<div style="margin-top: 10px; position: relative; z-index: 10;">
|
||
<a href="#kontribusi" class="btn-gold" style="width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||
<path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z" />
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_skill_btn_contrib">Isi Form Kontribusi</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
5. STATISTIK ALUMNI — Chart.js bar chart
|
||
───────────────────────────────────────── -->
|
||
<section id="database">
|
||
<div class="section-inner">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_stats">Statistik Alumni</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_stats">Jumlah Alumni <em>berdasarkan Tahun Kelulusan</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0" data-i18n="grp_m4n1fest_sub_stats">
|
||
Data wisudawan dan lulusan berdasarkan periode semester dan tahun kelulusan.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="two-col stat-cols" style="align-items: flex-start;">
|
||
<!-- left: Chart -->
|
||
<div class="chart-box rv d2" style="margin-top: 0;">
|
||
<div class="chart-header">
|
||
<div class="chart-title" data-i18n="grp_m4n1fest_chart_title">
|
||
Grafik Jumlah Lulusan
|
||
</div>
|
||
</div>
|
||
<div style="position: relative; height: 280px; width: 100%;">
|
||
<canvas id="kelulusanChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: Table -->
|
||
<div class="rv d1" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding: 0;">
|
||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
|
||
<thead>
|
||
<tr style="background: #1a3a6b; color: #fff;">
|
||
<th style="padding: 14px 20px; font-weight: 600;" data-i18n="grp_m4n1fest_table_head_period">Periode</th>
|
||
<th style="padding: 14px 20px; font-weight: 600; text-align: right;" data-i18n="grp_m4n1fest_table_head_amount">Jumlah</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p1">2024 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">50</td>
|
||
</tr>
|
||
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p2">2024 Ganjil</td>
|
||
<td style="padding: 14px 20px; text-align: right;">27</td>
|
||
</tr>
|
||
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p3">2023 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">63</td>
|
||
</tr>
|
||
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p4">2023 Ganjil</td>
|
||
<td style="padding: 14px 20px; text-align: right;">27</td>
|
||
</tr>
|
||
<tr style="background: #fff; border-bottom: 1px solid #e2e8f0;">
|
||
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p5">2022 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">45</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="padding: 12px 20px; font-size: 0.75rem; color: #6b7280; font-style: italic; text-align: center;" data-i18n="grp_m4n1fest_table_source">
|
||
Sumber : BAK UNTAN
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
6. TESTIMONIALS
|
||
───────────────────────────────────────── -->
|
||
<section id="testimoni">
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(
|
||
rgba(255, 255, 255, 0.02) 1px,
|
||
transparent 1px
|
||
),
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(255, 255, 255, 0.02) 1px,
|
||
transparent 1px
|
||
);
|
||
background-size: 48px 48px;
|
||
pointer-events: none;
|
||
"
|
||
></div>
|
||
<div class="testi-section-inner">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow eyebrow-y" data-i18n="grp_m4n1fest_eyebrow_testi">Testimoni Alumni</div>
|
||
<h2 class="sec-h2 sec-h2-w" data-i18n-html="grp_m4n1fest_title_testi">
|
||
Kata Mereka tentang <em>Informatika UNTAN</em>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="testi-grid">
|
||
<!-- T1 -->
|
||
<div class="testi-card rv d1">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text" data-i18n="grp_m4n1fest_testi1_text">
|
||
"Bagi calon mahasiswa Informatika Untan, saya berpesan untuk terus mengembangkan diri dan tidak cepat merasa puas. Perkuliahan adalah titik awal untuk membuka berbagai peluang yang lebih luas. Fokuslah pada bidang yang diminati, tingkatkan keahlian spesifik, perluas jejaring, serta kuasai bahasa asing sebagai nilai tambah. Dengan komitmen dan kemauan yang kuat, peluang untuk berkarir maupun melanjutkan studi di tingkat global akan semakin terbuka."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #3730a3, #6366f1);
|
||
"
|
||
>
|
||
DP
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Dona Pramana Pura</div>
|
||
<div class="testi-role" data-i18n="grp_m4n1fest_testi1_role">
|
||
Product Manager, Ai Practitioner · Angkatan 2009
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- T2 -->
|
||
<div class="testi-card rv d2">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text" data-i18n="grp_m4n1fest_testi2_text">
|
||
"Fondasi yang kalian bangun di Informatika Untan itu sangat berharga. Kemampuan berpikir algoritmik dan memecahkan masalah yang diasah selama kuliah adalah bekal yang akan terus relevan di mana pun kalian berkarier. Jangan takut bermimpi besar. Jika saya — yang memulai dari Pontianak — bisa sampai di Frankfurt dan berkontribusi di industri FinTech Eropa, kalian pun bisa. Yang penting adalah terus belajar, berani mengambil kesempatan, dan jangan pernah meremehkan kualitas pendidikan yang kalian terima di Untan."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #0f766e, #14b8a6);
|
||
"
|
||
>
|
||
CD
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Charles Darwis Hariman</div>
|
||
<div class="testi-role" data-i18n="grp_m4n1fest_testi2_role">
|
||
Software Developer, Traxpay GmbH
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- T3 -->
|
||
<div class="testi-card rv d3">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text" data-i18n="grp_m4n1fest_testi3_text">
|
||
"Fondasi yang kita peroleh dari kampus dan Himpunan merupakan wadah terbaik untuk belajar ketangguhan. Jadikanlah pengalaman tersebut sebagai sarana untuk terus terbuka terhadap perubahan. Jika kita mampu beradaptasi dengan baik, batas kemampuan kita tidak lagi ditentukan oleh geografi, melainkan seberapa jauh kita berani melangkah."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #1a3a6b, #2352a0);
|
||
"
|
||
>
|
||
IF
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Izhan Fakhruzi</div>
|
||
<div class="testi-role" data-i18n="grp_m4n1fest_testi3_role">
|
||
Dosen Tetap, UMP & Peneliti, Universidad de Granada
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
7. KEGIATAN — SKBI RAMADHAN & INFORMERS
|
||
───────────────────────────────────────── -->
|
||
<section id="kegiatan" style="padding: 52px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_events">Kegiatan Tahunan</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_events">Temui Kami di <em>Setiap Tahun</em></h2>
|
||
<p class="sec-sub" style="max-width: 520px; margin: 10px auto 0" data-i18n="grp_m4n1fest_sub_events">
|
||
HMIF Informatika UNTAN menyelenggarakan dua kegiatan tahunan
|
||
besar yang selalu mengundang dan mempertemukan para alumni.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="event-grid">
|
||
<!-- SKBI -->
|
||
<div class="event-card rv d1">
|
||
<img
|
||
src="./assets/WhatsApp Image 2026-05-21 at 5.34.09 AM.jpeg"
|
||
alt="SKBI Ramadhan"
|
||
style="width: 100%; height: 200px; object-fit: cover; display: block;"
|
||
/>
|
||
<div class="event-body">
|
||
<div class="event-title-row">
|
||
<span class="event-name" data-i18n="grp_m4n1fest_event1_title">SKBI Ramadhan</span>
|
||
<span
|
||
style="
|
||
font-size: 0.72rem;
|
||
color: #6b7280;
|
||
font-weight: 600;
|
||
"
|
||
data-i18n="grp_m4n1fest_event1_meta"
|
||
>Silaturahmi Keluarga Besar Informatika</span
|
||
>
|
||
</div>
|
||
<p class="event-desc" data-i18n="grp_m4n1fest_event1_desc">
|
||
SKBI Ramadhan adalah acara silaturahmi yang mempertemukan
|
||
seluruh keluarga besar Informatika UNTAN — mahasiswa aktif,
|
||
dosen, dan alumni dari berbagai angkatan. Kegiatan ini menjadi momen silaturahmi yang hangat di bulan Ramadhan, mempererat tali persaudaraan alumni dengan civitas akademika melalui kegiatan sosial, buka bersama, dan networking.
|
||
</p>
|
||
|
||
<div class="event-actions">
|
||
<a
|
||
href="https://www.instagram.com/hmif_ftuntan"
|
||
target="_blank"
|
||
class="btn-ig"
|
||
style="font-size: 0.78rem; padding: 9px 15px"
|
||
>
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
@hmif_ftuntan
|
||
</a>
|
||
<span class="event-info-note">
|
||
<svg
|
||
width="11"
|
||
height="11"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#9CA3AF"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_event1_note">Info lengkap di Instagram HMIF</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INFORMERS -->
|
||
<div class="event-card rv d2">
|
||
<img
|
||
src="./assets/WhatsApp Image 2026-05-21 at 5.33.12 AM (1).jpeg"
|
||
alt="INFORMERS"
|
||
style="width: 100%; height: 200px; object-fit: cover; display: block;"
|
||
/>
|
||
<div class="event-body">
|
||
<div class="event-title-row">
|
||
<span class="event-name" data-i18n="grp_m4n1fest_event2_title">INFORMERS</span>
|
||
<span
|
||
style="
|
||
font-size: 0.72rem;
|
||
color: #6b7280;
|
||
font-weight: 600;
|
||
"
|
||
data-i18n="grp_m4n1fest_event2_meta"
|
||
>Informatic Anniversary</span
|
||
>
|
||
</div>
|
||
<p class="event-desc" data-i18n="grp_m4n1fest_event2_desc">
|
||
INFORMERS adalah perayaan Hari Ulang Tahun Program Studi Informatika
|
||
UNTAN. Acara besar ini mewadahi berbagai kegiatan kompetisi akademik maupun non-akademik tingkat mahasiswa, pameran inovasi IT, hiburan musik, hingga malam puncak yang mengumpulkan seluruh civitas akademika dan alumni dalam semangat dedikasi dan kebersamaan.
|
||
</p>
|
||
|
||
<div class="event-actions">
|
||
<a
|
||
href="https://www.instagram.com/informershmif"
|
||
target="_blank"
|
||
class="btn-ig"
|
||
style="font-size: 0.78rem; padding: 9px 15px"
|
||
>
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
@informershmif
|
||
</a>
|
||
<span class="event-info-note">
|
||
<svg
|
||
width="11"
|
||
height="11"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#9CA3AF"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_event2_note">Pantau IG untuk jadwal & cara daftar</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="kontribusi">
|
||
<div class="section-inner">
|
||
<div class="two-col">
|
||
<!-- left: info & steps -->
|
||
<div class="rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_join">Gabung IKA</div>
|
||
<h2 class="sec-h2" data-i18n-html="grp_m4n1fest_title_join">Bergabung dengan <em>Grup Alumni</em></h2>
|
||
<p class="sec-sub" style="margin-bottom: 24px" data-i18n="grp_m4n1fest_sub_join">
|
||
Daftarkan dirimu untuk bergabung ke grup WhatsApp Ikatan
|
||
Keluarga Alumni (IKA) Informatika UNTAN. Terhubung dengan
|
||
ratusan alumni dan dapatkan info lowongan, kegiatan, dan
|
||
kolaborasi.
|
||
</p>
|
||
|
||
<div class="step-list">
|
||
<div class="step-row">
|
||
<div class="step-num">1</div>
|
||
<div>
|
||
<div class="step-h" data-i18n="grp_m4n1fest_step1_head">Isi Form Pendaftaran</div>
|
||
<p class="step-p" data-i18n="grp_m4n1fest_step1_desc">
|
||
Masukkan nama, NIM, nomor HP, email, status pekerjaan,
|
||
dan 3 skill utamamu.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num">2</div>
|
||
<div>
|
||
<div class="step-h" data-i18n="grp_m4n1fest_step2_head">Verifikasi Admin IKA</div>
|
||
<p class="step-p" data-i18n="grp_m4n1fest_step2_desc">
|
||
Admin IKA akan memverifikasi bahwa kamu adalah alumni
|
||
Informatika UNTAN dalam 1–2 hari kerja.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num step-num-done">
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="step-h" data-i18n="grp_m4n1fest_step3_head">Masuk Grup WhatsApp IKA</div>
|
||
<p class="step-p" data-i18n="grp_m4n1fest_step3_desc">
|
||
Setelah terverifikasi, kamu akan diundang ke grup
|
||
WhatsApp IKA dan langsung terhubung dengan ratusan
|
||
alumni!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group-highlight">
|
||
<div class="group-ey" data-i18n="grp_m4n1fest_wa_badge">Grup IKA Informatika UNTAN</div>
|
||
<div class="group-inner">
|
||
<div class="group-wa-icon">
|
||
<svg
|
||
width="21"
|
||
height="21"
|
||
viewBox="0 0 24 24"
|
||
fill="#fff"
|
||
>
|
||
<path
|
||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="group-title" data-i18n="grp_m4n1fest_wa_title">IKA Informatika UNTAN</div>
|
||
<div class="group-member" data-i18n="grp_m4n1fest_wa_sub">500+ anggota aktif</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: form preview -->
|
||
<!-- right: form AKTIF dengan Google Apps Script -->
|
||
<div class="rv d2">
|
||
<div class="form-card">
|
||
<div class="form-card-title" data-i18n="grp_m4n1fest_form_title">Form Pendaftaran IKA</div>
|
||
<p class="form-card-sub" data-i18n="grp_m4n1fest_form_sub">
|
||
Isi data di bawah untuk bergabung ke grup WhatsApp alumni.
|
||
</p>
|
||
|
||
<!-- Nama Lengkap -->
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_nama">Nama Lengkap *</label>
|
||
<input type="text" id="ika-nama" class="form-input" placeholder="Ahmad Rizky Pratama" />
|
||
</div>
|
||
|
||
<!-- NIM & Angkatan -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_nim">NIM</label>
|
||
<input type="text" id="ika-nim" class="form-input" placeholder="H1031..." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_angkatan">Angkatan *</label>
|
||
<input type="text" id="ika-angkatan" class="form-input" placeholder="2020" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- No HP & Email -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_hp">No. HP / WhatsApp *</label>
|
||
<input type="tel" id="ika-hp" class="form-input" placeholder="+62 812-xxxx-xxxx" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_email">Email Aktif *</label>
|
||
<input type="email" id="ika-email" class="form-input" placeholder="nama@gmail.com" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status -->
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_status">Status Saat Ini *</label>
|
||
<select id="ika-status" class="form-input">
|
||
<option value="" data-i18n="grp_m4n1fest_form_status_opt1">— Pilih Status —</option>
|
||
<option value="Bekerja" data-i18n="grp_m4n1fest_form_status_opt2">Bekerja</option>
|
||
<option value="Wirausaha" data-i18n="grp_m4n1fest_form_status_opt3">Wirausaha / Freelance</option>
|
||
<option value="Melanjutkan Studi" data-i18n="grp_m4n1fest_form_status_opt4">Melanjutkan Studi</option>
|
||
<option value="Mencari Kerja" data-i18n="grp_m4n1fest_form_status_opt5">Sedang Mencari Kerja</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Instansi -->
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n-html="grp_m4n1fest_form_instansi">Tempat Bekerja / Instansi
|
||
<span class="form-note-optional">(opsional)</span></label>
|
||
<input type="text" id="ika-instansi" class="form-input" placeholder="Contoh: PT. Telkom Indonesia, Google..." />
|
||
</div>
|
||
|
||
<!-- 3 Skill -->
|
||
<div class="form-group" style="margin-bottom: 6px">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_skill_title">3 Skill Utama yang Dikuasai *</label>
|
||
<p style="font-size: 0.72rem; color: #9ca3af; margin-bottom: 8px;" data-i18n="grp_m4n1fest_form_skill_sub">Pilih 3 skill yang paling kamu kuasai.</p>
|
||
</div>
|
||
<div class="form-row-3" style="margin-bottom: 14px">
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 1 *</label>
|
||
<select id="ika-skill1" class="form-input" style="font-size: 0.82rem">
|
||
<option value="" data-i18n="grp_m4n1fest_form_skill_opt1">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 2</label>
|
||
<select id="ika-skill2" class="form-input" style="font-size: 0.82rem">
|
||
<option value="" data-i18n="grp_m4n1fest_form_skill_opt1">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 3</label>
|
||
<select id="ika-skill3" class="form-input" style="font-size: 0.82rem">
|
||
<option value="" data-i18n="grp_m4n1fest_form_skill_opt1">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Persetujuan -->
|
||
<div class="form-group">
|
||
<label class="form-label" data-i18n="grp_m4n1fest_form_persetujuan">Persetujuan *</label>
|
||
<div class="form-consent" style="cursor:pointer" onclick="document.getElementById('ika-consent').click()">
|
||
<input type="checkbox" id="ika-consent" style="display:none" />
|
||
<div class="form-checkbox" id="ika-consent-box">
|
||
<!-- centang muncul via JS -->
|
||
</div>
|
||
<p class="form-consent-text" data-i18n="grp_m4n1fest_form_persetujuan_txt">
|
||
Saya menyetujui bahwa data yang saya masukkan adalah benar dan bersedia diverifikasi oleh admin IKA Informatika UNTAN.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tombol Submit -->
|
||
<button id="ika-submit-btn" onclick="submitIkaForm()" class="btn-gold"
|
||
style="width: 100%; justify-content: center; margin-top: 6px; border: none; cursor: pointer;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="22" y1="2" x2="11" y2="13" />
|
||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_form_btn">Daftar Sekarang</span>
|
||
</button>
|
||
<p class="form-cta-note" id="ika-status-msg" data-i18n="grp_m4n1fest_form_msg">Data langsung tersimpan · Proses 1–2 hari kerja</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" style="padding: 52px 0 40px">
|
||
<div class="two-col">
|
||
<!-- left: FAQ -->
|
||
<div class="rv">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_faq">FAQ</div>
|
||
<h2 class="sec-h2" style="margin-bottom: 24px" data-i18n-html="grp_m4n1fest_title_faq">
|
||
Pertanyaan Seputar <em>Alumni</em>
|
||
</h2>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item open">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q1"
|
||
>Bagaimana cara bergabung dengan grup alumni IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a1">
|
||
Isi form pendaftaran di section "Gabung IKA" di atas
|
||
dengan nama lengkap, angkatan, nomor WhatsApp, dan email
|
||
aktifmu. Setelah diverifikasi admin dalam 1–2 hari kerja,
|
||
kamu akan diundang ke grup WhatsApp IKA Informatika UNTAN.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q2"
|
||
>Berapa lama proses verifikasi pendaftaran IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a2">
|
||
Proses verifikasi biasanya memakan waktu 1–2 hari kerja.
|
||
Admin IKA akan mengecek bahwa kamu adalah alumni
|
||
Informatika UNTAN berdasarkan nama dan angkatan yang
|
||
diisi.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q3">Apa manfaat bergabung ke grup alumni IKA?</span>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a3">
|
||
Di grup IKA kamu dapat mengakses info lowongan kerja dari
|
||
sesama alumni, info kegiatan tahunan seperti SKBI Ramadhan dan
|
||
INFORMERS, kolaborasi proyek, berbagi pengalaman karir,
|
||
serta membangun koneksi profesional dengan ratusan alumni
|
||
dari berbagai angkatan dan industri.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q4"
|
||
>Apakah ada info lowongan kerja atau magang di
|
||
IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a4">
|
||
Ya! Salah satu manfaat utama grup IKA adalah alumni yang
|
||
sudah bekerja sering berbagi info lowongan dari perusahaan
|
||
mereka. Banyak anggota IKA yang mendapat pekerjaan pertama
|
||
atau berpindah karir melalui referral dari sesama alumni
|
||
di grup ini.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q5"
|
||
>Apakah ada program kerja sama industri dari Prodi
|
||
Informatika?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a5">
|
||
Prodi Informatika UNTAN memiliki program Kerja Praktik
|
||
(KP) wajib yang menghubungkan mahasiswa dengan industri.
|
||
Info terkini tentang kerja sama industri bisa diikuti
|
||
melalui Instagram @informatika.untan.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q6"
|
||
>Bagaimana cara mengikuti kegiatan SKBI Ramadhan atau
|
||
INFORMERS?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a6">
|
||
Info pendaftaran dan kegiatan SKBI Ramadhan dapat ditemukan di
|
||
Instagram @hmif_ftuntan. Untuk INFORMERS, pantau Instagram
|
||
@informershmif. Sebagai anggota grup IKA, kamu juga akan
|
||
mendapatkan notifikasi langsung setiap kali ada kegiatan
|
||
yang melibatkan alumni.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span data-i18n="grp_m4n1fest_faq_q7">Siapa saja yang bisa mendaftar ke IKA?</span>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a" data-i18n="grp_m4n1fest_faq_a7">
|
||
Seluruh alumni Program Studi Informatika Universitas
|
||
Tanjungpura dari semua angkatan dapat mendaftar ke IKA.
|
||
Tidak ada batasan angkatan, status pekerjaan, atau
|
||
domisili. Selama kamu adalah lulusan Informatika UNTAN,
|
||
kamu berhak bergabung!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: Instagram -->
|
||
<div class="rv d2">
|
||
<div class="eyebrow" data-i18n="grp_m4n1fest_eyebrow_contact">Kontak & Sosial Media</div>
|
||
<h2 class="sec-h2" style="margin-bottom: 20px" data-i18n-html="grp_m4n1fest_title_contact">
|
||
Temukan Kami di <em>Instagram</em>
|
||
</h2>
|
||
<p class="sec-sub" style="margin-bottom: 22px" data-i18n="grp_m4n1fest_sub_contact">
|
||
Ikuti akun Instagram resmi kami untuk informasi terbaru
|
||
seputar kegiatan alumni, info lowongan, dan update Prodi
|
||
Informatika UNTAN.
|
||
</p>
|
||
|
||
<a
|
||
href="https://www.instagram.com/informatika.untan"
|
||
target="_blank"
|
||
class="ig-main-card"
|
||
>
|
||
<div class="ig-icon-lg">
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<div class="ig-main-label" data-i18n="grp_m4n1fest_ig_main_label">Instagram Resmi Prodi</div>
|
||
<div class="ig-main-handle">@informatika.untan</div>
|
||
<div class="ig-main-sub" data-i18n="grp_m4n1fest_ig_main_desc">
|
||
Update akademik, kegiatan, dan info alumni
|
||
</div>
|
||
</div>
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#E1306C"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="7" y1="17" x2="17" y2="7" />
|
||
<polyline points="7 7 17 7 17 17" />
|
||
</svg>
|
||
</a>
|
||
|
||
<div class="ig-grid">
|
||
<a
|
||
href="https://www.instagram.com/hmif_ftuntan"
|
||
target="_blank"
|
||
class="ig-card"
|
||
>
|
||
<div class="ig-icon-sm">
|
||
<svg
|
||
width="17"
|
||
height="17"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div class="ig-handle">@hmif_ftuntan</div>
|
||
<div class="ig-sub" data-i18n="grp_m4n1fest_ig_hmif_desc">HMIF & SKBI Ramadhan</div>
|
||
</a>
|
||
<a
|
||
href="https://www.instagram.com/informershmif"
|
||
target="_blank"
|
||
class="ig-card"
|
||
>
|
||
<div class="ig-icon-sm">
|
||
<svg
|
||
width="17"
|
||
height="17"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div class="ig-handle">@informershmif</div>
|
||
<div class="ig-sub" data-i18n="grp_m4n1fest_ig_informers_desc">INFORMERS</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="cta-box">
|
||
<div class="cta-box-ey" data-i18n="grp_m4n1fest_cta_box_title">Siap bergabung?</div>
|
||
<p class="cta-box-p" data-i18n="grp_m4n1fest_cta_box_desc">
|
||
Scroll ke atas dan isi form pendaftaran IKA sekarang.
|
||
Gratis, cepat, dan langsung terhubung dengan ratusan alumni!
|
||
</p>
|
||
<a
|
||
href="#kontribusi"
|
||
class="btn-gold"
|
||
style="font-size: 0.82rem"
|
||
>
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
<span data-i18n="grp_m4n1fest_cta_box_btn">Daftar IKA Sekarang</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</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>
|
||
// Manajemen Mega Menu Navigasi Desktop
|
||
(function () {
|
||
const menuItems = document.querySelectorAll('[data-menu]');
|
||
const megaOverlay = document.getElementById('mega-overlay');
|
||
|
||
let activeMenuId = null; // Menyimpan ID menu yang sedang aktif/terbuka
|
||
|
||
// Pemetaan menu ke panel konten mega menu
|
||
const menuPanelMap = {
|
||
tentang: 'mega-tentang',
|
||
program: 'mega-program',
|
||
sdm: 'mega-sdm',
|
||
fasilitas: 'mega-fasilitas',
|
||
karya: 'mega-karya',
|
||
kontak: 'mega-kontak'
|
||
};
|
||
|
||
// Mengubah status visual tombol navigasi berdasarkan menu aktif
|
||
function setMenuButtonState(menuId) {
|
||
menuItems.forEach(menuItemElement => {
|
||
const isActive = menuItemElement.getAttribute('data-menu') === menuId;
|
||
const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
|
||
const chevronIconElement = menuItemElement.querySelector('.fa-chevron-down');
|
||
|
||
if (buttonElement) {
|
||
buttonElement.classList.toggle('active', isActive);
|
||
buttonElement.setAttribute('aria-expanded', isActive ? 'true' : 'false');
|
||
}
|
||
if (chevronIconElement) {
|
||
chevronIconElement.style.transform = isActive ? 'rotate(180deg)' : '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Menutup semua panel mega menu yang sedang terbuka
|
||
function closeActiveMenus() {
|
||
Object.values(menuPanelMap).forEach(panelId => {
|
||
const panelElement = document.getElementById(panelId);
|
||
if (panelElement) {
|
||
panelElement.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
if (megaOverlay) {
|
||
megaOverlay.classList.remove('active');
|
||
}
|
||
setMenuButtonState(null);
|
||
activeMenuId = null;
|
||
}
|
||
|
||
// Membuka panel mega menu tertentu dan menutup yang lainnya
|
||
function openSelectedMenu(menuId) {
|
||
const targetPanelElement = document.getElementById(menuPanelMap[menuId]);
|
||
if (!targetPanelElement) return;
|
||
|
||
Object.values(menuPanelMap).forEach(panelId => {
|
||
const panelElement = document.getElementById(panelId);
|
||
if (panelElement) {
|
||
panelElement.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
targetPanelElement.classList.add('active');
|
||
if (megaOverlay) {
|
||
megaOverlay.classList.add('active');
|
||
}
|
||
setMenuButtonState(menuId);
|
||
activeMenuId = menuId;
|
||
}
|
||
|
||
// Menginisialisasi event listener untuk setiap tombol navigasi
|
||
menuItems.forEach(menuItemElement => {
|
||
const menuId = menuItemElement.getAttribute('data-menu');
|
||
const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
|
||
if (!buttonElement) return;
|
||
|
||
buttonElement.setAttribute('aria-haspopup', 'true');
|
||
buttonElement.setAttribute('aria-expanded', 'false');
|
||
|
||
buttonElement.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
if (activeMenuId === menuId) {
|
||
closeActiveMenus();
|
||
} else {
|
||
openSelectedMenu(menuId);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Menutup menu ketika overlay (latar belakang redup) diklik
|
||
if (megaOverlay) {
|
||
megaOverlay.addEventListener('click', closeActiveMenus);
|
||
}
|
||
|
||
// Menutup menu jika klik dilakukan di luar area navigasi dan panel menu
|
||
document.addEventListener('click', (event) => {
|
||
const isClickInsideNav = event.target.closest('#main-nav');
|
||
const isClickInsidePanel = event.target.closest('.mega-panel');
|
||
|
||
if (!isClickInsideNav && !isClickInsidePanel && activeMenuId) {
|
||
closeActiveMenus();
|
||
}
|
||
});
|
||
|
||
// Menutup menu jika menekan tombol Escape keyboard
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape' && activeMenuId) {
|
||
closeActiveMenus();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<script>
|
||
// Manajemen Menu Navigasi Seluler (Mobile Menu)
|
||
(function() {
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenuPanel = document.getElementById('mobile-menu');
|
||
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
|
||
|
||
// Menampilkan atau menyembunyikan menu seluler saat tombol menu diklik
|
||
if (mobileMenuButton && mobileMenuPanel) {
|
||
mobileMenuButton.addEventListener('click', () => {
|
||
const isHidden = mobileMenuPanel.classList.contains('-translate-x-full');
|
||
mobileMenuPanel.classList.toggle('-translate-x-full');
|
||
mobileMenuButton.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
|
||
});
|
||
}
|
||
|
||
// Menyembunyikan kembali menu seluler saat tombol silang (tutup) diklik
|
||
if (closeMobileMenuButton && mobileMenuPanel) {
|
||
closeMobileMenuButton.addEventListener('click', () => {
|
||
mobileMenuPanel.classList.add('-translate-x-full');
|
||
if (mobileMenuButton) {
|
||
mobileMenuButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!-- Scroll Reveal Observer & Chart.js Initialization -->
|
||
<script>
|
||
// URL Web App Google Apps Script untuk penanganan pengiriman form IKA
|
||
const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
|
||
|
||
// Efek visual checkbox kustom pada Form Persetujuan
|
||
const consentCheckbox = document.getElementById('ika-consent');
|
||
if (consentCheckbox) {
|
||
consentCheckbox.addEventListener('change', (event) => {
|
||
const consentBoxElement = document.getElementById('ika-consent-box');
|
||
if (!consentBoxElement) return;
|
||
|
||
const isChecked = event.target.checked;
|
||
if (isChecked) {
|
||
consentBoxElement.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
|
||
stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"/></svg>`;
|
||
} else {
|
||
consentBoxElement.innerHTML = '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Mengumpulkan dan merapikan data masukan dari form
|
||
function getIkaFormData() {
|
||
return {
|
||
nama: document.getElementById('ika-nama').value.trim(),
|
||
nim: document.getElementById('ika-nim').value.trim(),
|
||
angkatan: document.getElementById('ika-angkatan').value.trim(),
|
||
hp: document.getElementById('ika-hp').value.trim(),
|
||
email: document.getElementById('ika-email').value.trim(),
|
||
status: document.getElementById('ika-status').value,
|
||
instansi: document.getElementById('ika-instansi').value.trim(),
|
||
skill1: document.getElementById('ika-skill1').value,
|
||
skill2: document.getElementById('ika-skill2').value,
|
||
skill3: document.getElementById('ika-skill3').value,
|
||
hasConsent: document.getElementById('ika-consent').checked
|
||
};
|
||
}
|
||
|
||
// Melakukan validasi pengisian field wajib dan persetujuan checkbox
|
||
function validateIkaFormData(formData) {
|
||
const hasRequiredFields = formData.nama &&
|
||
formData.angkatan &&
|
||
formData.hp &&
|
||
formData.email &&
|
||
formData.status &&
|
||
formData.skill1 &&
|
||
formData.hasConsent;
|
||
return !!hasRequiredFields;
|
||
}
|
||
|
||
// Memperbarui pesan status pengiriman pada UI
|
||
function updateIkaFormStatusMessage(message, color) {
|
||
const statusMessageElement = document.getElementById('ika-status-msg');
|
||
if (statusMessageElement) {
|
||
statusMessageElement.textContent = message;
|
||
statusMessageElement.style.color = color;
|
||
}
|
||
}
|
||
|
||
// Mengubah kondisi tombol kirim dan pesan selama proses mengunggah data
|
||
function setIkaFormLoadingState(isLoading) {
|
||
const submitButtonElement = document.getElementById('ika-submit-btn');
|
||
if (!submitButtonElement) return;
|
||
|
||
if (isLoading) {
|
||
submitButtonElement.disabled = true;
|
||
submitButtonElement.textContent = 'Mengirim...';
|
||
updateIkaFormStatusMessage('Sedang mengirim data...', '#9ca3af');
|
||
} else {
|
||
submitButtonElement.disabled = false;
|
||
submitButtonElement.textContent = 'Daftar Sekarang';
|
||
}
|
||
}
|
||
|
||
// Mengirimkan data form ke Google Apps Script via GET fetch (mode no-cors)
|
||
async function sendIkaFormData(formData) {
|
||
const params = new URLSearchParams({
|
||
nama: formData.nama,
|
||
nim: formData.nim,
|
||
angkatan: formData.angkatan,
|
||
noHp: formData.hp,
|
||
email: formData.email,
|
||
status: formData.status,
|
||
instansi: formData.instansi,
|
||
skill1: formData.skill1,
|
||
skill2: formData.skill2,
|
||
skill3: formData.skill3
|
||
});
|
||
|
||
const targetUrl = `${IKA_SCRIPT_URL}?${params.toString()}`;
|
||
await fetch(targetUrl, {
|
||
method: 'GET',
|
||
mode: 'no-cors'
|
||
});
|
||
}
|
||
|
||
// Mereset isian seluruh kolom formulir kembali ke kosong/awal
|
||
function resetIkaForm() {
|
||
const inputIds = ['ika-nama', 'ika-nim', 'ika-angkatan', 'ika-hp', 'ika-email', 'ika-instansi'];
|
||
inputIds.forEach(id => {
|
||
const inputElement = document.getElementById(id);
|
||
if (inputElement) inputElement.value = '';
|
||
});
|
||
|
||
const selectIds = ['ika-status', 'ika-skill1', 'ika-skill2', 'ika-skill3'];
|
||
selectIds.forEach(id => {
|
||
const selectElement = document.getElementById(id);
|
||
if (selectElement) selectElement.selectedIndex = 0;
|
||
});
|
||
|
||
const consentCheckbox = document.getElementById('ika-consent');
|
||
if (consentCheckbox) consentCheckbox.checked = false;
|
||
|
||
const consentBoxElement = document.getElementById('ika-consent-box');
|
||
if (consentBoxElement) consentBoxElement.innerHTML = '';
|
||
}
|
||
|
||
// Alur utama penanganan tombol submit pendaftaran IKA
|
||
async function submitIkaForm() {
|
||
const formData = getIkaFormData();
|
||
|
||
const isValid = validateIkaFormData(formData);
|
||
if (!isValid) {
|
||
updateIkaFormStatusMessage('⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.', '#ef4444');
|
||
return;
|
||
}
|
||
|
||
setIkaFormLoadingState(true);
|
||
|
||
try {
|
||
await sendIkaFormData(formData);
|
||
|
||
updateIkaFormStatusMessage('✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.', '#16a34a');
|
||
|
||
const submitButtonElement = document.getElementById('ika-submit-btn');
|
||
if (submitButtonElement) {
|
||
submitButtonElement.textContent = 'Terkirim ✓';
|
||
}
|
||
|
||
resetIkaForm();
|
||
} catch (error) {
|
||
updateIkaFormStatusMessage('❌ Gagal mengirim. Coba lagi atau hubungi admin.', '#ef4444');
|
||
setIkaFormLoadingState(false);
|
||
}
|
||
}
|
||
|
||
// Manajemen Penarikan Data Keahlian Alumni dari Google Sheets secara Live
|
||
(function fetchSkillData() {
|
||
const SHEET_ID = '1mtVB1vLev-OWz6aTuuddGKPS8tCv8MJcGpzws8irpxk';
|
||
const query = encodeURIComponent("select I,J,K where lower(L)='approved'");
|
||
const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
|
||
|
||
// Pemetaan kategori keahlian ke ID element grafik di HTML
|
||
const SKILL_MAP = {
|
||
'Web Development': 'web-development',
|
||
'Mobile Development': 'mobile-development',
|
||
'Python / Data Science': 'python-data-science',
|
||
'UI/UX Design': 'uiux-design',
|
||
'Networking / DevOps': 'networking-devops',
|
||
'Cybersecurity': 'cybersecurity',
|
||
'Machine Learning / AI': 'machine-learning-ai',
|
||
'Database': 'database',
|
||
};
|
||
|
||
const spinnerElement = document.getElementById('skill-note-spinner');
|
||
const noteTextElement = document.getElementById('skill-note-text');
|
||
|
||
let alumniCount = 0;
|
||
let isDataFetched = false;
|
||
let isFetchFailed = false;
|
||
|
||
// Menampilkan catatan status di bawah grafik keahlian dengan dukungan bilingual
|
||
function setSkillNote(shouldSpin) {
|
||
if (spinnerElement) {
|
||
spinnerElement.style.animation = shouldSpin ? 'spin 1s linear infinite' : 'none';
|
||
if (!shouldSpin) {
|
||
spinnerElement.style.display = 'none';
|
||
} else {
|
||
spinnerElement.style.display = 'inline-block';
|
||
}
|
||
}
|
||
if (!noteTextElement) return;
|
||
|
||
const currentLang = typeof getLang === 'function' ? getLang() : 'id';
|
||
|
||
if (!isDataFetched) {
|
||
if (isFetchFailed) {
|
||
if (currentLang === 'en') {
|
||
noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Fill out contribution form</a>`;
|
||
} else {
|
||
noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
|
||
}
|
||
} else {
|
||
noteTextElement.textContent = currentLang === 'en' ? 'Loading alumni skill data...' : 'Memuat data skill alumni...';
|
||
}
|
||
} else {
|
||
if (alumniCount === 0) {
|
||
if (currentLang === 'en') {
|
||
noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Fill out contribution form</a>`;
|
||
} else {
|
||
noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
|
||
}
|
||
} else {
|
||
if (currentLang === 'en') {
|
||
noteTextElement.textContent = `Data from ${alumniCount} verified alumni.`;
|
||
} else {
|
||
noteTextElement.textContent = `Data dari ${alumniCount} alumni yang diverifikasi.`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Terapkan translasi teks saat memuat halaman
|
||
setSkillNote(true);
|
||
|
||
// Pasang event listener untuk menangani pergantian bahasa dinamis
|
||
document.addEventListener('languageChanged', () => {
|
||
setSkillNote(isDataFetched ? false : !isFetchFailed);
|
||
});
|
||
|
||
// Menyaring dan mengelompokkan teks bebas ke kategori keahlian terstandar
|
||
function normalizeSkill(rawSkillText) {
|
||
if (!rawSkillText) return null;
|
||
const lowercasedSkill = rawSkillText.toLowerCase().trim();
|
||
if (lowercasedSkill.includes('web')) return 'Web Development';
|
||
if (lowercasedSkill.includes('mobile')) return 'Mobile Development';
|
||
if (lowercasedSkill.includes('python') || lowercasedSkill.includes('data science')) return 'Python / Data Science';
|
||
if (lowercasedSkill.includes('ui') || lowercasedSkill.includes('ux')) return 'UI/UX Design';
|
||
if (lowercasedSkill.includes('network') || lowercasedSkill.includes('devops')) return 'Networking / DevOps';
|
||
if (lowercasedSkill.includes('cyber')) return 'Cybersecurity';
|
||
if (lowercasedSkill.includes('machine') || lowercasedSkill.includes('ai') || lowercasedSkill.includes('artificial')) return 'Machine Learning / AI';
|
||
if (lowercasedSkill.includes('database') || lowercasedSkill.includes('db')) return 'Database';
|
||
return null;
|
||
}
|
||
|
||
// Memotong pembungkus JSONP Google Sheets agar diperoleh array baris murni
|
||
function parseGoogleSheetsJson(responseText) {
|
||
const sanitizedText = responseText.replace(/^[^{]+/, '').replace(/[);]+$/, '');
|
||
const parsedData = JSON.parse(sanitizedText);
|
||
return (parsedData.table && parsedData.table.rows) ? parsedData.table.rows : [];
|
||
}
|
||
|
||
// Menghitung kemunculan setiap kategori keahlian dari data Sheets
|
||
function calculateSkillCounts(rows) {
|
||
const counts = {};
|
||
rows.forEach(row => {
|
||
[0, 1, 2].forEach(colIndex => {
|
||
const cell = row.c && row.c[colIndex];
|
||
const rawValue = cell && cell.v ? String(cell.v).trim() : '';
|
||
const normalized = normalizeSkill(rawValue);
|
||
if (normalized) {
|
||
counts[normalized] = (counts[normalized] || 0) + 1;
|
||
}
|
||
});
|
||
});
|
||
return counts;
|
||
}
|
||
|
||
// Memperbarui lebar progress bar keahlian dan persentase teks di UI
|
||
function updateSkillBarsUI(counts) {
|
||
const totalMentions = Object.values(counts).reduce((sum, count) => sum + count, 0);
|
||
const maxCount = Math.max(...Object.values(counts), 0);
|
||
|
||
Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
|
||
const count = counts[label] || 0;
|
||
const percentage = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
|
||
const barPercentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
|
||
|
||
const barElement = document.getElementById(`bar-${idKey}`);
|
||
const percentElement = document.getElementById(`pct-${idKey}`);
|
||
|
||
if (barElement) barElement.style.width = `${barPercentage}%`;
|
||
if (percentElement) percentElement.textContent = count > 0 ? `${percentage}%` : '—';
|
||
});
|
||
}
|
||
|
||
// Melakukan fetch data live dari spreadsheet
|
||
fetch(url)
|
||
.then(response => response.text())
|
||
.then(responseText => {
|
||
const rows = parseGoogleSheetsJson(responseText);
|
||
|
||
isDataFetched = true;
|
||
if (rows.length === 0) {
|
||
alumniCount = 0;
|
||
setSkillNote(false);
|
||
return;
|
||
}
|
||
|
||
alumniCount = rows.length;
|
||
const counts = calculateSkillCounts(rows);
|
||
updateSkillBarsUI(counts);
|
||
setSkillNote(false);
|
||
})
|
||
.catch(() => {
|
||
isDataFetched = false;
|
||
isFetchFailed = true;
|
||
setSkillNote(false);
|
||
});
|
||
})();
|
||
|
||
// Observer Efek Muncul Perlahan saat Pengguliran Halaman (Scroll Reveal)
|
||
const revealObserver = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("in");
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.08 }
|
||
);
|
||
document.querySelectorAll(".rv").forEach((el) => revealObserver.observe(el));
|
||
|
||
// Menampilkan atau menyembunyikan panel jawaban FAQ
|
||
function toggleFaq(item) {
|
||
item.classList.toggle("open");
|
||
}
|
||
|
||
// Inisialisasi Grafik Jumlah Kelulusan (Chart.js) dengan Dukungan Bilingual
|
||
window.addEventListener("load", () => {
|
||
if (typeof Chart === "undefined") return;
|
||
const chartCanvasElement = document.getElementById("kelulusanChart");
|
||
if (!chartCanvasElement) return;
|
||
|
||
// Mengembalikan nama label kuartal berdasarkan pilihan bahasa aktif
|
||
const getChartLabels = (languageCode) => {
|
||
return languageCode === 'en'
|
||
? ['2022 Even', '2023 Odd', '2023 Even', '2024 Odd', '2024 Even']
|
||
: ['2022 Genap', '2023 Ganjil', '2023 Genap', '2024 Ganjil', '2024 Genap'];
|
||
};
|
||
|
||
const initialLanguageCode = typeof getLang === 'function' ? getLang() : 'id';
|
||
|
||
window.kelulusanChartInstance = new Chart(chartCanvasElement.getContext("2d"), {
|
||
type: "bar",
|
||
data: {
|
||
labels: getChartLabels(initialLanguageCode),
|
||
datasets: [
|
||
{
|
||
label: initialLanguageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan',
|
||
data: [45, 27, 63, 27, 50],
|
||
backgroundColor: "#299bc1",
|
||
borderRadius: 0,
|
||
borderSkipped: false,
|
||
}
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: {
|
||
backgroundColor: "#1A3A6B",
|
||
titleFont: {
|
||
family: "Plus Jakarta Sans",
|
||
size: 12,
|
||
weight: "700",
|
||
},
|
||
bodyFont: { family: "Plus Jakarta Sans", size: 11 },
|
||
padding: 12,
|
||
cornerRadius: 8,
|
||
callbacks: {
|
||
label: (context) => {
|
||
const languageCode = typeof getLang === 'function' ? getLang() : 'id';
|
||
const text = languageCode === 'en' ? 'Graduates' : 'Jumlah';
|
||
const unit = languageCode === 'en' ? 'People' : 'Orang';
|
||
return ` ${text}: ${context.raw} ${unit}`;
|
||
},
|
||
},
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: { display: false, drawBorder: false },
|
||
ticks: {
|
||
font: { family: "Plus Jakarta Sans", size: 11 },
|
||
color: "#6b7280",
|
||
},
|
||
},
|
||
y: {
|
||
grid: {
|
||
color: "#f3f4f6",
|
||
drawBorder: false,
|
||
},
|
||
ticks: {
|
||
font: { family: "Plus Jakarta Sans", size: 11 },
|
||
color: "#9ca3af",
|
||
stepSize: 10,
|
||
},
|
||
min: 0,
|
||
max: 70
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
// Memperbarui grafik secara dinamis saat terjadi event pergantian bahasa
|
||
document.addEventListener('languageChanged', (event) => {
|
||
const languageCode = event.detail.lang;
|
||
if (window.kelulusanChartInstance) {
|
||
window.kelulusanChartInstance.data.labels = getChartLabels(languageCode);
|
||
window.kelulusanChartInstance.data.datasets[0].label = languageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan';
|
||
window.kelulusanChartInstance.update();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script src="../../assets/global/localization.js"></script>
|
||
</body>
|
||
</html> |