forked from izu/student-web-if-development-kit
Tazyeuu
2018 lines
77 KiB
HTML
2018 lines
77 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 06 – ACAAB | 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"
|
|
/>
|
|
<style>
|
|
/* ===== MOBILE NAV STABILITY FIX =====
|
|
Prevents logo bar from collapsing/shifting on Android when
|
|
address bar hides/shows and triggers viewport reflow.
|
|
===================================== */
|
|
#nav-wrapper {
|
|
position: fixed !important;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
will-change: box-shadow;
|
|
}
|
|
|
|
#nav-wrapper > div:first-child {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
#nav-wrapper > div:first-child {
|
|
min-height: 0 !important;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
#pengumuman-bar {
|
|
z-index: 40;
|
|
}
|
|
|
|
#pengumuman-bar.is-stuck {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Skip Link Styling */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: #003150;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
z-index: 100;
|
|
transition: top 0.3s;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* Focus visible for better keyboard navigation */
|
|
:focus-visible {
|
|
outline: 3px solid #feb401;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Mega Menu Styles */
|
|
.hero-pagination .swiper-pagination-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
display: inline-block;
|
|
margin: 0 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hero-pagination .swiper-pagination-bullet-active {
|
|
background: rgba(255, 255, 255, 1);
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mega-panel {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
visibility 0.2s ease;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.mega-panel.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Overlay transition */
|
|
#mega-overlay {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
visibility 0.2s ease;
|
|
}
|
|
|
|
#mega-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mega-link-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid #e2e8f0;
|
|
background: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.mega-link-card:hover {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mega-link-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-menu-btn.active {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #1e40af;
|
|
}
|
|
|
|
.nav-menu-btn:hover {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Mega menu positioning - no gap */
|
|
#main-nav {
|
|
position: relative;
|
|
}
|
|
|
|
#mega-menu-container {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#mega-menu-container .mega-panel {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Keep pointer bridge under nav to prevent hover loss */
|
|
.nav-menu-item {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-menu-item::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
}
|
|
|
|
/* ===== Luco Chatbot Animations ===== */
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
transform: translateY(10px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes lucoPulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
#luco-container {
|
|
animation: slideInRight 0.5s ease-out forwards;
|
|
}
|
|
|
|
#luco-bubble {
|
|
animation: fadeInUp 0.3s ease-out forwards;
|
|
width: min(18rem, calc(100vw - 2rem));
|
|
}
|
|
|
|
#luco-btn {
|
|
animation: lucoPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
#luco-btn:hover {
|
|
animation: none;
|
|
}
|
|
|
|
/* Typing indicator */
|
|
.typing-indicator span {
|
|
display: inline-block;
|
|
animation: bounce 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|
|
|
|
/* Luco speech bubble arrow */
|
|
#luco-bubble .bubble-arrow {
|
|
position: absolute;
|
|
right: 24px;
|
|
bottom: -6px;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: white;
|
|
transform: rotate(45deg);
|
|
border-right: 1px solid #e2e8f0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body
|
|
class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black"
|
|
>
|
|
<a href="#main-content" class="skip-link" data-i18n="skip_to_content"
|
|
>Langsung ke Konten Utama</a
|
|
>
|
|
|
|
<div
|
|
id="nav-wrapper"
|
|
class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto"
|
|
>
|
|
<div
|
|
class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden"
|
|
style="min-height: 0"
|
|
>
|
|
<div
|
|
class="absolute inset-0 w-full overflow-hidden pointer-events-none"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
|
|
style="overflow: hidden; max-height: 100%"
|
|
>
|
|
01101001 01101110 01100110 01101111 01110010 01101101 01100001
|
|
01110100 01101001 01101011 01100001 00100000 01110101 01101110
|
|
01110100 01100001 01101110 00100000 01100010 01101001 01110011
|
|
01100001 01101001 01101110 01100110 01101111 01110010 01101101
|
|
01100001 01110100 01101001 01101011 01100001 00100000 01110101
|
|
01101110 01110100 01100001 01101110 00100000 01100010 01101001
|
|
01110011 01100001 01010101 01001110 01010100 01000001 01001110
|
|
00100000 00110010 00110000 00110010 00110101 00100000 01100110
|
|
01110101 01110100 01110101 01110010 01100101 00100000 01110010
|
|
01100101 01100001 01100100 01111001 01101001 01101110 01100110
|
|
01101111 01110010 01101101 01100001 01110100 01101001 01101011
|
|
01100001 00100000 01110101 01101110
|
|
</div>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10"
|
|
>
|
|
<a href="../../index.html" class="flex items-center gap-4 group">
|
|
<div
|
|
class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0"
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
|
|
class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center"
|
|
>
|
|
<span
|
|
class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase"
|
|
>INFORMATIKA</span
|
|
>
|
|
<span
|
|
class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans"
|
|
>UNIVERSITAS TANJUNGPURA</span
|
|
>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="hidden lg:flex items-center gap-5">
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<a
|
|
href="https://satu.untan.ac.id"
|
|
target="_blank"
|
|
class="hover:text-untan-yellow transition-colors font-medium"
|
|
>SATU UNTAN</a
|
|
>
|
|
</div>
|
|
<div class="pl-5 border-l border-white/20 flex items-center gap-3">
|
|
<button
|
|
class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1"
|
|
>
|
|
<span class="font-bold">ID</span>
|
|
<span class="text-white/40">|</span> EN
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Pengaturan aksesibilitas"
|
|
onclick="
|
|
const p = document.getElementById('access-panel');
|
|
if (p) {
|
|
p.classList.toggle('hidden');
|
|
p.classList.toggle('flex');
|
|
}
|
|
"
|
|
>
|
|
<i class="fas fa-universal-access" aria-hidden="true"></i>
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Cari konten"
|
|
>
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
id="mobile-menu-button"
|
|
class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Buka menu navigasi"
|
|
aria-expanded="false"
|
|
aria-controls="mobile-menu"
|
|
>
|
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav
|
|
class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative"
|
|
id="main-nav"
|
|
aria-label="Menu navigasi utama"
|
|
>
|
|
<div class="container mx-auto px-6">
|
|
<div
|
|
class="flex items-center justify-center w-full gap-1 py-2"
|
|
role="menubar"
|
|
>
|
|
<!-- Menu: Tentang Kami -->
|
|
<div class="nav-menu-item relative" data-menu="tentang">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_about">Tentang Kami</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Program -->
|
|
<div class="nav-menu-item relative" data-menu="program">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_program">Program</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: SDM -->
|
|
<div class="nav-menu-item relative" data-menu="sdm">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_sdm">SDM</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Fasilitas -->
|
|
<div class="nav-menu-item relative" data-menu="fasilitas">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_facilities">Fasilitas</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Karya & Agenda -->
|
|
<div class="nav-menu-item relative" data-menu="karya">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_works">Karya & Agenda</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Kontak -->
|
|
<div class="nav-menu-item relative" data-menu="kontak">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide"
|
|
>
|
|
<span data-i18n="nav_contact">Kontak</span>
|
|
<i
|
|
class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
|
|
<div
|
|
id="mega-menu-container"
|
|
class="absolute left-0 right-0 top-full z-50"
|
|
>
|
|
<!-- Mega Menu: Tentang Kami -->
|
|
<div
|
|
id="mega-tentang"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured -->
|
|
<div
|
|
class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16"
|
|
></div>
|
|
<div
|
|
class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12"
|
|
></div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
|
|
data-i18n="mega_about_title"
|
|
>Tentang Kami</span
|
|
>
|
|
<h3 class="text-2xl font-bold mb-3">
|
|
Mengenal Informatika UNTAN
|
|
</h3>
|
|
<p
|
|
class="text-slate-300 text-sm mb-6 leading-relaxed"
|
|
data-i18n="mega_about_desc"
|
|
>
|
|
Terakreditasi Unggul, mencetak lulusan kompeten di bidang
|
|
teknologi informasi sejak 1993.
|
|
</p>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
|
|
>
|
|
Selengkapnya <i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Links -->
|
|
<div class="col-span-8 grid grid-cols-2 gap-6">
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-landmark"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_history"
|
|
>
|
|
Sejarah & Tonggak
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_history_desc"
|
|
>
|
|
Perjalanan panjang membangun generasi digital
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_org"
|
|
>
|
|
Struktur Organisasi
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_org_desc"
|
|
>
|
|
Pimpinan dan jajaran pengelola
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="profil.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-bullseye"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_vision"
|
|
>
|
|
Visi & Misi
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_vision_desc"
|
|
>
|
|
Arah dan tujuan pengembangan prodi
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-handshake"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_partnership"
|
|
>
|
|
Kerjasama & MoU
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_partnership_desc"
|
|
>
|
|
Mitra industri dan akademik
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Program -->
|
|
<div
|
|
id="mega-program"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured -->
|
|
<div
|
|
class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"
|
|
></div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
|
|
>Program Akademik</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-bold mb-3"
|
|
data-i18n="mega_program_obe"
|
|
>
|
|
Kurikulum Berbasis OBE
|
|
</h3>
|
|
<p class="text-blue-100 text-sm mb-6 leading-relaxed">
|
|
Outcome-Based Education dengan 4 jalur konsentrasi: AI,
|
|
Software Engineering, Network, dan Information Systems.
|
|
</p>
|
|
<a
|
|
href="subject-and-courses.html"
|
|
class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
|
|
data-i18n="btn_krs_sim"
|
|
>
|
|
<i class="fas fa-play-circle"></i> Simulasi KRS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Links Grid -->
|
|
<div class="col-span-8">
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<a
|
|
href="subject-and-courses.html"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-graduation-cap"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_academic"
|
|
>
|
|
Akademik
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_academic_desc"
|
|
>
|
|
Jadwal, KRS, dan kalender
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-award"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_accreditation"
|
|
>
|
|
Akreditasi
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_accred_desc"
|
|
>
|
|
Status Unggul BAN-PT
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="graduate-profile.html"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-user-graduate"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_graduate"
|
|
>
|
|
Profil Lulusan
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_graduate_desc"
|
|
>
|
|
Kompetensi & karir
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="subject-and-courses.html"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-book-open"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_courses"
|
|
>
|
|
Mata Kuliah
|
|
</h4>
|
|
<p class="text-xs text-slate-500 mt-1">
|
|
144 SKS kurikulum
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="academic-guidelines.html"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_guideline"
|
|
>
|
|
Panduan
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_guideline_desc"
|
|
>
|
|
Buku panduan akademik
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_statistics"
|
|
>
|
|
Informatika Angka
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_statistics_desc"
|
|
>
|
|
Statistik & data
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: SDM -->
|
|
<div
|
|
id="mega-sdm"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured Dosen -->
|
|
<div
|
|
class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden"
|
|
>
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div
|
|
class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full"
|
|
></div>
|
|
<div
|
|
class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full"
|
|
></div>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
|
|
data-i18n="mega_sdm_title"
|
|
>Sumber Daya Manusia</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-bold mb-3"
|
|
data-i18n="mega_sdm_desc"
|
|
>
|
|
Tim Pengajar Profesional
|
|
</h3>
|
|
<p class="text-slate-300 text-sm mb-4 leading-relaxed">
|
|
30+ dosen berkualifikasi S2/S3 dari universitas terkemuka
|
|
dalam dan luar negeri.
|
|
</p>
|
|
<div class="flex gap-4 mb-6">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">
|
|
15+
|
|
</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">
|
|
Doktor
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">
|
|
20+
|
|
</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">
|
|
Magister
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">
|
|
5
|
|
</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">
|
|
Guru Besar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
|
|
data-i18n="btn_all_lecturers"
|
|
>
|
|
Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: KK Groups -->
|
|
<div class="col-span-7">
|
|
<h4
|
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
|
|
data-i18n="label_expertise"
|
|
>
|
|
Kelompok Keahlian
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">
|
|
KK Kecerdasan Buatan
|
|
</h5>
|
|
<p class="text-xs text-slate-500">
|
|
Machine Learning, Computer Vision, NLP
|
|
</p>
|
|
<span
|
|
class="inline-block mt-2 text-xs text-purple-600 font-semibold"
|
|
>8 Dosen <i class="fas fa-chevron-right ml-1"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">
|
|
KK Rekayasa Perangkat Lunak
|
|
</h5>
|
|
<p class="text-xs text-slate-500">
|
|
Software Engineering, DevOps, Testing
|
|
</p>
|
|
<span
|
|
class="inline-block mt-2 text-xs text-blue-600 font-semibold"
|
|
>10 Dosen <i class="fas fa-chevron-right ml-1"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">
|
|
KK Jaringan & Keamanan
|
|
</h5>
|
|
<p class="text-xs text-slate-500">
|
|
Network, Cybersecurity, Cloud
|
|
</p>
|
|
<span
|
|
class="inline-block mt-2 text-xs text-emerald-600 font-semibold"
|
|
>7 Dosen <i class="fas fa-chevron-right ml-1"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">
|
|
KK Sistem Informasi
|
|
</h5>
|
|
<p class="text-xs text-slate-500">
|
|
Data Science, GIS, Business Intel
|
|
</p>
|
|
<span
|
|
class="inline-block mt-2 text-xs text-orange-600 font-semibold"
|
|
>6 Dosen <i class="fas fa-chevron-right ml-1"></i
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Fasilitas -->
|
|
<div
|
|
id="mega-fasilitas"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
|
|
></div>
|
|
<i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">
|
|
Laboratorium
|
|
</h4>
|
|
<p
|
|
class="text-sm text-cyan-100 mb-4"
|
|
data-i18n="mega_lab_desc"
|
|
>
|
|
8 lab modern dengan peralatan terkini
|
|
</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore"
|
|
>
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
|
|
></div>
|
|
<i class="fas fa-server text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">
|
|
Data Center
|
|
</h4>
|
|
<p
|
|
class="text-sm text-violet-100 mb-4"
|
|
data-i18n="mega_dc_desc"
|
|
>
|
|
Server & infrastruktur cloud lokal
|
|
</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore"
|
|
>
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12"
|
|
></div>
|
|
<i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
|
|
<h4
|
|
class="text-lg font-bold mb-2"
|
|
data-i18n="mega_eresources"
|
|
>
|
|
E-Resources
|
|
</h4>
|
|
<p
|
|
class="text-sm text-emerald-100 mb-4"
|
|
data-i18n="mega_eresources_desc"
|
|
>
|
|
Akses jurnal & database ilmiah
|
|
</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore"
|
|
>
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="ifuntanhub.html"
|
|
class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all"
|
|
>
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12"
|
|
></div>
|
|
<i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
|
|
<p
|
|
class="text-sm text-slate-300 mb-4"
|
|
data-i18n="mega_hub_desc"
|
|
>
|
|
Platform PaaS untuk mahasiswa
|
|
</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all"
|
|
>
|
|
Launch <i class="fas fa-external-link-alt"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Karya & Agenda -->
|
|
<div
|
|
id="mega-karya"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Research Highlight -->
|
|
<div class="col-span-5">
|
|
<div
|
|
class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4"
|
|
>
|
|
<span
|
|
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
|
|
data-i18n="mega_research_title"
|
|
>Riset Unggulan</span
|
|
>
|
|
<h3
|
|
class="text-xl font-bold mb-2"
|
|
data-i18n="mega_sinta_title"
|
|
>
|
|
Indeks SINTA Terbaik
|
|
</h3>
|
|
<p
|
|
class="text-amber-100 text-sm mb-4"
|
|
data-i18n="mega_sinta_desc"
|
|
>
|
|
Publikasi dosen terindeks Scopus, WoS, dan jurnal nasional
|
|
terakreditasi.
|
|
</p>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
|
|
data-i18n="btn_publications"
|
|
>
|
|
Lihat Publikasi
|
|
</a>
|
|
</div>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600"
|
|
>
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-800 text-sm"
|
|
data-i18n="link_info_agenda"
|
|
>
|
|
Info & Agenda
|
|
</h5>
|
|
<p
|
|
class="text-xs text-slate-500"
|
|
data-i18n="link_info_agenda_desc"
|
|
>
|
|
Pengumuman dan jadwal kegiatan
|
|
</p>
|
|
</div>
|
|
<i
|
|
class="fas fa-chevron-right text-slate-400 ml-auto"
|
|
></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- Right: Grid -->
|
|
<div class="col-span-7 grid grid-cols-2 gap-4">
|
|
<a href="karya.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
>
|
|
Semua Karya
|
|
</h4>
|
|
<p class="text-xs text-slate-500 mt-1">
|
|
Lihat seluruh karya dalam satu halaman
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="karya.html?filter=penelitian"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-microscope"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_research"
|
|
>
|
|
Riset
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_research_desc"
|
|
>
|
|
Penelitian dosen dan mahasiswa
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="karya.html?filter=pkm" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-hands-helping"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_community"
|
|
>
|
|
Pengabdian
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_community_desc"
|
|
>
|
|
Program pengabdian masyarakat
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-trophy"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_achievements"
|
|
>
|
|
Prestasi
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_achievements_desc"
|
|
>
|
|
Pencapaian dosen & mahasiswa
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Kontak -->
|
|
<div
|
|
id="mega-kontak"
|
|
class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl"
|
|
>
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Contact Info -->
|
|
<div
|
|
class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white"
|
|
>
|
|
<h3
|
|
class="text-xl font-bold mb-4"
|
|
data-i18n="mega_contact_title"
|
|
>
|
|
Hubungi Kami
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-slate-300">
|
|
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Pontianak
|
|
Tenggara
|
|
</p>
|
|
<p class="text-xs text-slate-400 mt-1">
|
|
Kalimantan Barat 78124
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fab fa-whatsapp text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white font-medium">
|
|
+62 851-7165-5161
|
|
</p>
|
|
<p class="text-xs text-slate-400">
|
|
Senin - Jumat, 08:00 - 16:00
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fas fa-envelope text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white font-medium">
|
|
info@informatika.untan.ac.id
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Quick Links & Social -->
|
|
<div class="col-span-7">
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-id-card"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_official_contact"
|
|
>
|
|
Kontak Resmi
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_contact_desc"
|
|
>
|
|
Direktori kontak staf
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="mailto:info@informatika.untan.ac.id"
|
|
class="mega-link-card group"
|
|
>
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white"
|
|
>
|
|
<i class="fas fa-comment-dots"></i>
|
|
</div>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_feedback"
|
|
>
|
|
Saran & Masukan
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 mt-1"
|
|
data-i18n="link_feedback_desc"
|
|
>
|
|
Kirim feedback Anda
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-5">
|
|
<h4
|
|
class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
|
|
data-i18n="follow_us"
|
|
>
|
|
Ikuti Kami
|
|
</h4>
|
|
<div class="flex gap-3">
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-instagram text-xl"></i>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-youtube text-xl"></i>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-facebook-f text-xl"></i>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-twitter text-xl"></i>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-linkedin-in text-xl"></i>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform"
|
|
>
|
|
<i class="fab fa-tiktok text-xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End mega-menu-container -->
|
|
</nav>
|
|
|
|
<!-- Overlay for mega menu -->
|
|
<div
|
|
id="mega-overlay"
|
|
class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"
|
|
></div>
|
|
</div>
|
|
|
|
<div
|
|
id="mobile-menu"
|
|
class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Menu navigasi mobile"
|
|
>
|
|
<div
|
|
class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-bold text-lg text-white font-serif"
|
|
>Menu Utama</span
|
|
>
|
|
<button
|
|
class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
|
|
aria-label="Ganti bahasa"
|
|
>
|
|
<span class="font-bold">ID</span>
|
|
<span class="text-white/40" aria-hidden="true">|</span> EN
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
|
|
aria-label="Pengaturan aksesibilitas"
|
|
onclick="
|
|
const p = document.getElementById('access-panel');
|
|
if (p) {
|
|
p.classList.toggle('hidden');
|
|
p.classList.toggle('flex');
|
|
}
|
|
"
|
|
>
|
|
<i class="fas fa-universal-access" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<button
|
|
id="close-mobile-menu"
|
|
class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
|
|
aria-label="Tutup menu navigasi"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
|
|
<a
|
|
href="../../index.html"
|
|
class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
|
|
data-i18n="nav_home"
|
|
>Beranda</a
|
|
>
|
|
|
|
<!-- Tentang Kami -->
|
|
<div class="pt-2">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_about"
|
|
>Tentang Kami</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_history"
|
|
>Sejarah & Tonggak</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_org"
|
|
>Struktur Organisasi</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_vision"
|
|
>Visi & Misi</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_partnership"
|
|
>Kerjasama & MoU</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Program -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_program"
|
|
>Program</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="subject-and-courses.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_academic"
|
|
>Akademik</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_accreditation"
|
|
>Akreditasi</a
|
|
>
|
|
<a
|
|
href="graduate-profile.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_graduate"
|
|
>Profil Lulusan</a
|
|
>
|
|
<a
|
|
href="subject-and-courses.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_courses"
|
|
>Mata Kuliah</a
|
|
>
|
|
<a
|
|
href="academic-guidelines.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_guideline"
|
|
>Panduan Akademik</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_statistics"
|
|
>Informatika Angka</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SDM -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_sdm"
|
|
>SDM</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
|
|
data-i18n="btn_all_lecturers"
|
|
>Semua Dosen</a
|
|
>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_ai"
|
|
>Kecerdasan Buatan</a
|
|
>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_se"
|
|
>Rekayasa Perangkat Lunak</a
|
|
>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_network"
|
|
>Jaringan & Keamanan</a
|
|
>
|
|
<a
|
|
href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_is"
|
|
>Sistem Informasi</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fasilitas -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_facilities"
|
|
>Fasilitas</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_lab"
|
|
>Laboratorium</a
|
|
>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_dc"
|
|
>Data Center</a
|
|
>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_eresources"
|
|
>E-Resources</a
|
|
>
|
|
<a
|
|
href="ifuntanhub.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
>IFUNTANHUB</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Karya & Agenda -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_works"
|
|
>Karya & Agenda</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="karya.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_all_karya"
|
|
>Semua Karya</a
|
|
>
|
|
<a
|
|
href="karya.html?filter=penelitian"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_research"
|
|
>Riset</a
|
|
>
|
|
<a
|
|
href="karya.html?filter=pkm"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_community"
|
|
>Pengabdian Masyarakat</a
|
|
>
|
|
<a
|
|
href="content.html?type=rubrik"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_achievements"
|
|
>Prestasi</a
|
|
>
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_info_agenda"
|
|
>Info & Agenda</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kontak -->
|
|
<div class="pt-2 border-t border-slate-200 pb-8">
|
|
<span
|
|
class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_contact"
|
|
>Kontak</span
|
|
>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a
|
|
href="content.html?type=berita"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_official_contact"
|
|
>Kontak Resmi</a
|
|
>
|
|
<a
|
|
href="mailto:info@informatika.untan.ac.id"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_feedback"
|
|
>Saran & Masukan</a
|
|
>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
|
|
>
|
|
<i class="fab fa-instagram text-pink-500"></i> Instagram
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2"
|
|
>
|
|
<i class="fab fa-youtube text-red-500"></i> YouTube
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main
|
|
id="main-content"
|
|
class="pt-[88px] lg:pt-[160px] min-h-screen bg-white"
|
|
>
|
|
<div class="container mx-auto px-4 lg:px-8 py-12">
|
|
<div class="mb-8 pb-8 border-b border-slate-200">
|
|
<span
|
|
class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3"
|
|
>Tugas Halaman Statis</span
|
|
>
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">
|
|
Sorotan dan Prestasi Karya Mahasiswa
|
|
</h1>
|
|
<p class="text-slate-500 text-sm">
|
|
Kelompok 06 — ACAAB · Informatika UNTAN
|
|
2026
|
|
</p>
|
|
</div>
|
|
<div id="assignment-body" class="prose prose-slate max-w-none">
|
|
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
<p>Tulis konten halaman kelompok di sini.</p>
|
|
<h3>Subjudul</h3>
|
|
<p>
|
|
Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.
|
|
</p>
|
|
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer
|
|
class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0"
|
|
>
|
|
<div
|
|
class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center"
|
|
>
|
|
<h3
|
|
class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4"
|
|
data-i18n="footer_follow_us"
|
|
>
|
|
Ikuti Kami
|
|
</h3>
|
|
<div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-instagram text-xl sm:text-2xl"></i
|
|
></a>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-youtube text-xl sm:text-2xl"></i
|
|
></a>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-facebook-f text-xl sm:text-2xl"></i
|
|
></a>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-twitter text-xl sm:text-2xl"></i
|
|
></a>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-linkedin-in text-xl sm:text-2xl"></i
|
|
></a>
|
|
<a
|
|
href="https://instagram.com/informatika.untan"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"
|
|
><i class="fab fa-tiktok text-xl sm:text-2xl"></i
|
|
></a>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left"
|
|
>
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
class="h-16 sm:h-20 shrink-0"
|
|
alt="Logo UNTAN"
|
|
/>
|
|
<div
|
|
class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight"
|
|
>
|
|
<h2
|
|
class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1"
|
|
>
|
|
INFORMATIKA
|
|
</h2>
|
|
<h2
|
|
class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5"
|
|
>
|
|
UNIVERSITAS TANJUNGPURA
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light"
|
|
>
|
|
<p
|
|
class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1"
|
|
>
|
|
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
|
|
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak
|
|
Tenggara,
|
|
</p>
|
|
<p>Kota Pontianak, Kalimantan Barat 78124</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide"
|
|
>
|
|
<span>E: info@informatika.untan.ac.id</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>P: +62 851-7165-5161</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>F: +62(561) 739637</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>WA: +62 851-7165-5161</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="w-full relative z-0 mt-4 pointer-events-none flex justify-center"
|
|
>
|
|
<img
|
|
src="../../assets/global/footer.png"
|
|
alt="Footer Illustration"
|
|
class="w-full h-auto object-cover object-bottom"
|
|
style="object-position: bottom"
|
|
/>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
const menuItems = document.querySelectorAll("[data-menu]");
|
|
const megaOverlay = document.getElementById("mega-overlay");
|
|
|
|
let activeMenu = null;
|
|
|
|
const menuMap = {
|
|
tentang: "mega-tentang",
|
|
program: "mega-program",
|
|
sdm: "mega-sdm",
|
|
fasilitas: "mega-fasilitas",
|
|
karya: "mega-karya",
|
|
kontak: "mega-kontak",
|
|
};
|
|
|
|
function setButtonState(menuId) {
|
|
menuItems.forEach((item) => {
|
|
const isActive = item.getAttribute("data-menu") === menuId;
|
|
const btn = item.querySelector(".nav-menu-btn");
|
|
const chevron = item.querySelector(".fa-chevron-down");
|
|
|
|
btn.classList.toggle("active", isActive);
|
|
btn.setAttribute("aria-expanded", isActive ? "true" : "false");
|
|
chevron.style.transform = isActive ? "rotate(180deg)" : "";
|
|
});
|
|
}
|
|
|
|
function closeMenus() {
|
|
Object.values(menuMap).forEach((panelId) => {
|
|
const panel = document.getElementById(panelId);
|
|
if (panel) panel.classList.remove("active");
|
|
});
|
|
|
|
megaOverlay.classList.remove("active");
|
|
setButtonState(null);
|
|
activeMenu = null;
|
|
}
|
|
|
|
function openMenu(menuId) {
|
|
const targetPanel = document.getElementById(menuMap[menuId]);
|
|
if (!targetPanel) return;
|
|
|
|
Object.values(menuMap).forEach((panelId) => {
|
|
const panel = document.getElementById(panelId);
|
|
if (panel) panel.classList.remove("active");
|
|
});
|
|
|
|
targetPanel.classList.add("active");
|
|
megaOverlay.classList.add("active");
|
|
setButtonState(menuId);
|
|
activeMenu = menuId;
|
|
}
|
|
|
|
menuItems.forEach((item) => {
|
|
const menuId = item.getAttribute("data-menu");
|
|
const button = item.querySelector(".nav-menu-btn");
|
|
|
|
button.setAttribute("aria-haspopup", "true");
|
|
button.setAttribute("aria-expanded", "false");
|
|
|
|
button.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (activeMenu === menuId) {
|
|
closeMenus();
|
|
} else {
|
|
openMenu(menuId);
|
|
}
|
|
});
|
|
});
|
|
|
|
megaOverlay.addEventListener("click", closeMenus);
|
|
|
|
document.addEventListener("click", (e) => {
|
|
const clickedInsideNav = e.target.closest("#main-nav");
|
|
const clickedInsidePanel = e.target.closest(".mega-panel");
|
|
|
|
if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
|
|
closeMenus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape" && activeMenu) {
|
|
closeMenus();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function () {
|
|
const mobileBtn = document.getElementById("mobile-menu-button");
|
|
const mobileMenu = document.getElementById("mobile-menu");
|
|
const closeMobileBtn = document.getElementById("close-mobile-menu");
|
|
if (mobileBtn && mobileMenu) {
|
|
mobileBtn.addEventListener("click", function () {
|
|
const isOpen = !mobileMenu.classList.contains("-translate-x-full");
|
|
mobileMenu.classList.toggle("-translate-x-full");
|
|
mobileBtn.setAttribute("aria-expanded", isOpen ? "false" : "true");
|
|
});
|
|
}
|
|
if (closeMobileBtn && mobileMenu) {
|
|
closeMobileBtn.addEventListener("click", function () {
|
|
mobileMenu.classList.add("-translate-x-full");
|
|
if (mobileBtn) mobileBtn.setAttribute("aria-expanded", "false");
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<script src="../../assets/global/localization.js"></script>
|
|
</body>
|
|
</html>
|