Araya/student-web-if-development-kit
2
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity
Files
e5bd8d06538d8d6ac8da494f55aa3b95aa41e4e3
student-web-if-development-kit/groups/HarusSelesaiKP/index.html
T
tistopandita 693e41af0a Optimize images and convert PNG to WebP
2026-06-05 08:34:24 +07:00

1974 lines
84 KiB
HTML
Raw Blame History

<!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 03 &ndash; HarusSelesaiKP | Informatika UNTAN</title>
<!--
Anti-flicker safety net: body.lang-pending is hidden via style.css
until localization.js (loaded sync below) applies the correct
language on DOMContentLoaded and removes the class.
This inline fallback ensures the rule exists even if style.css
hasn't parsed yet.
-->
<style id="lang-pending-style">
body.lang-pending {
visibility: hidden
}
</style>
<!--
localization.js MUST be loaded synchronously (no defer/async)
so the IIFE inside it can set window.__currentLang before
the browser renders any text. This is the ONLY intentional
render-blocking script.
-->
<script src="localization.js"></script>
<!-- Preload hero image — eliminates LCP delay -->
<link rel="preload" href="images/hero.webp" as="image" type="image/webp" />
<link rel="stylesheet" href="../../assets/global/output.css" />
<link rel="stylesheet" href="style.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" />
<!-- Font Awesome loaded async — non-render-blocking -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</noscript>
</head>
<body class="lang-pending 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="lang-id font-bold">ID</span>
<span class="text-white/40">|</span>
<span class="lang-en opacity-50 font-normal">EN</span>
</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="lang-id font-bold">ID</span>
<span class="text-white/40" aria-hidden="true">|</span>
<span class="lang-en opacity-50 font-normal">EN</span>
</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="
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="study-at-untan pt-[88px] lg:pt-[160px] min-h-screen bg-white">
<!-- HERO SECTION -->
<section class="hero-section">
<div class="hero-overlay"></div>
<h1 class="hero-title">
Study at
<span class="highlight-text">Universitas Tanjungpura</span> Pontianak
</h1>
<p class="hero-description" data-i18n="skp_hero_desc">
Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
</p>
</section>
<!-- ABOUT SECTION -->
<section class="about-section">
<div class="about-image-wrapper">
<span class="image-bg-decorator"></span>
<div class="main-image"></div>
</div>
<div class="about-content">
<span class="eyebrow-component" data-i18n="skp_about_eyebrow">Tentang Untan</span>
<h2 class="about-title" data-i18n="skp_about_title">
Kampus Unggul di Kalimantan Barat
</h2>
<div class="about-description">
<p data-i18n="skp_about_desc_1">
Universitas Tanjungpura merupakan perguruan tinggi negeri
terkemuka di Kalimantan Barat yang berkomitmen menghadirkan
pendidikan berkualitas.
</p>
<p data-i18n="skp_about_desc_2">
UNTAN terus mendorong pengembangan riset, inovasi, dan kolaborasi
di berbagai bidang.
</p>
<p data-i18n="skp_about_desc_3">
Didukung lingkungan belajar yang nyaman, mahasiswa memiliki ruang
untuk berkembang secara akademik maupun nonakademik.
</p>
</div>
<a href="https://www.untan.ac.id/" target="_blank" rel="noopener noreferrer" class="about-link">
<span data-i18n="skp_about_link_text">Kunjungi Website Resmi</span>
<svg xmlns="http://www.w3.org/2000/svg" class="link-icon" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd"
d="M12 5.714a1 1 0 0 1 1 1v12.5a1 1 0 0 1-2 0v-12.5a1 1 0 0 1 1-1" clip-rule="evenodd">
</path>
<path fill="currentColor" fill-rule="evenodd"
d="M12 4.214a1 1 0 0 1 .707.293l4.5 4.5a1 1 0 0 1-1.414 1.415L12 6.628l-3.793 3.793a1 1 0 0 1-1.414-1.415l4.5-4.5A1 1 0 0 1 12 4.214"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</section>
<!-- FACILITIES SECTION -->
<section class="facilities-section">
<span class="eyebrow-component" data-i18n="skp_fac_eyebrow">Fasilitas Kampus</span>
<h2 class="facilities-title" data-i18n="skp_fac_main_title">
Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman
</h2>
<div class="facilities-grid" id="facilities-grid-container"></div>
</section>
<!-- CAMPUS SECTION -->
<section class="campus-section">
<span class="eyebrow-component" data-i18n="skp_campus_eyebrow">Kehidupan Kampus</span>
<h2 class="campus-title" data-i18n="skp_campus_title">
Aktivitas Mahasiswa & Organisasi Kampus
</h2>
<p class="campus-subtitle" data-i18n="skp_campus_subtitle">
Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui
organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.
</p>
<div class="campus-layout">
<div class="category-list-container" id="category-buttons-root"></div>
<div class="directory-list-container" id="directory-cards-root"></div>
</div>
</section>
<!-- PONTIANAK CITY SECTION -->
<section class="pontianak-city-section">
<div class="pontianak-overlay"></div>
<div class="pontianak-content">
<span class="eyebrow-component" data-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
<h2 class="pontianak-title" data-i18n="skp_pontianak_title">
Live In Pontianak
</h2>
<p class="pontianak-desc" data-i18n="skp_pontianak_desc">
Pontianak bukan sekadar ibu kota Kalimantan Barat, tetapi tempat
yang nyaman untuk tinggal, ramah bagi mahasiswa, dan bersahabat di
kantong. Kota ini menawarkan akses fasilitas umum yang lengkap,
ragam kuliner yang menggoda, serta suasana belajar yang aktif dan
penuh semangat.
</p>
</div>
</section>
<!-- DESTINATION SECTION -->
<section class="destination-section">
<span class="eyebrow-component" data-i18n="skp_dest_eyebrow">Wisata & Destinasi</span>
<h2 class="destination-title" data-i18n="skp_dest_title">
Tempat Menarik di Pontianak
</h2>
<hr class="destination-divider" />
<div class="destination-grid" id="destination-grid-container"></div>
</section>
<!-- CULINARY SECTION -->
<section class="culinary-section">
<span class="eyebrow-component" data-i18n="skp_cul_eyebrow">Cafe & Kuliner</span>
<h2 class="culinary-title" data-i18n="skp_cul_title">
Kuliner dan Coffee Shop Favorit Mahasiswa
</h2>
<hr class="culinary-divider" />
<div class="culinary-tabs-container" id="culinary-buttons-root"></div>
<div class="culinary-grid" id="culinary-cards-root"></div>
</section>
<!-- LIVING COST SECTION -->
<section class="living-cost-section">
<div class="cost-banner-wrapper">
<img src="images/biaya-hidup.jpg" alt="Ilustrasi biaya hidup mahasiswa di Pontianak"
class="cost-banner-img" loading="lazy" decoding="async" width="1200" height="800" />
<div class="cost-banner-overlay"></div>
</div>
<div class="cost-info-panel">
<span class="eyebrow-component" data-i18n="skp_cost_eyebrow">Biaya Hidup Mahasiswa</span>
<h2 class="cost-title" data-i18n="skp_cost_title">
Perkiraan Biaya Hidup Mahasiswa di Pontianak
</h2>
<p class="cost-desc" data-i18n="skp_cost_desc">
Perencanaan keuangan yang baik membantu mahasiswa menjalani masa
studi dengan lebih nyaman di Pontianak.
</p>
<span class="cost-note" data-i18n="skp_cost_note">
*Data yang didapat bersumber dari survey internal
</span>
<div class="cost-cards-grid" id="cost-cards-root"></div>
</div>
</section>
</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" loading="lazy" decoding="async" />
<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" loading="lazy"
decoding="async" />
</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>
<!-- localization.js is now loaded in <head> synchronously for anti-flicker -->
<!-- See the <head> section for its <script> tag -->
<!-- JavaScript Kelompok HarusSelesaiKP -->
<!-- JavaScript Facilities Section -->
<script>
const facilitiesData = [
{
imgSrc: "images/perpus.jpg",
icon: "icons/book-filled.svg",
titleKey: "skp_fac_title_perpus",
descKey: "skp_fac_desc_perpus",
title: "Perpustakaan UNTAN",
desc: "Koleksi literatur digital dan fisik terlengkap dengan ruang baca yang tenang dan modern.",
},
{
imgSrc: "images/rusunawa.jpg",
icon: "icons/house.svg",
titleKey: "skp_fac_title_rusunawa",
descKey: "skp_fac_desc_rusunawa",
title: "Rusunawa",
desc: "Hunian mahasiswa yang aman, terjangkau, dan berlokasi strategis di dalam lingkungan kampus.",
},
{
imgSrc: "images/rs-untan.jpg",
icon: "icons/hospital.svg",
titleKey: "skp_fac_title_rs",
descKey: "skp_fac_desc_rs",
title: "Rumah Sakit Untan & Klinik Pratama",
desc: "Layanan kesehatan prima bagi seluruh sivitas akademika dengan tenaga medis profesional.",
},
{
imgSrc: "images/gkb.jpg",
icon: "icons/building.svg",
titleKey: "skp_fac_title_gkb",
descKey: "skp_fac_desc_gkb",
title: "Gedung Kuliah Bersama",
desc: "Ruang kelas interaktif dengan dukungan teknologi multimedia terkini untuk proses belajar mengajar.",
},
{
imgSrc: "images/upt-bahasa.jpg",
icon: "icons/flag-indonesia.svg",
titleKey: "skp_fac_title_bahasa",
descKey: "skp_fac_desc_bahasa",
title: "UPT Bahasa",
desc: "Pusat pelatihan bahasa asing dan sertifikasi internasional untuk menunjang karir global.",
},
{
imgSrc: "images/area-olahraga.jpg",
icon: "icons/run-fill.svg",
titleKey: "skp_fac_title_olahraga",
descKey: "skp_fac_desc_olahraga",
title: "Area Olahraga",
desc: "Fasilitas olahraga outdoor dan indoor lengkap untuk menjaga kebugaran dan menyalurkan bakat.",
},
{
imgSrc: "images/masjid-muhtadin.jpeg",
icon: "icons/tabler-mosque.svg",
titleKey: "skp_fac_title_masjid",
descKey: "skp_fac_desc_masjid",
title: "Masjid Muhtadin UNTAN",
desc: "Pusat ibadah yang nyaman dan inklusif bagi sivitas akademika UNTAN dengan suasana religius yang menenangkan.",
},
{
imgSrc: "images/lab-kampus.jpg",
icon: "icons/research-glass.svg",
titleKey: "skp_fac_title_lab",
descKey: "skp_fac_desc_lab",
title: "Laboraturium Kampus UNTAN",
desc: "Fasilitas laboratorium modern UNTAN yang mendukung riset, praktikum, dan inovasi mahasiswa.",
},
{
imgSrc: "images/audit-untan.webp",
icon: "icons/building-home.svg",
titleKey: "skp_fac_title_audit",
descKey: "skp_fac_desc_audit",
title: "Auditorium UNTAN",
desc: "Ruang serbaguna representatif UNTAN untuk seminar, acara akademik, dan kegiatan besar kampus.",
},
];
function renderFacilitiesCards() {
const gridContainer = document.getElementById(
"facilities-grid-container",
);
let cardsHtmlHTML = "";
facilitiesData.forEach((item) => {
const displayTitle =
typeof t === "function" ? t(item.titleKey) : item.titleKey;
const displayDesc =
typeof t === "function" ? t(item.descKey) : item.descKey;
cardsHtmlHTML += `
<div class="facility-card">
<img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
<div class="card-body">
<span class="card-icon-badge">
<img src="${item.icon}" alt="" class="card-icon" loading="lazy" decoding="async" />
</span>
<h3 class="card-title">${displayTitle}</h3>
<p class="card-desc">${displayDesc}</p>
</div>
</div>
`;
});
gridContainer.innerHTML = cardsHtmlHTML;
}
renderFacilitiesCards();
document.addEventListener("languageChanged", () => {
renderFacilitiesCards();
});
</script>
<!-- JavaScript Campus Section -->
<script>
const categoriesData = [
{
id: "Organisasi",
textKey: "skp_campus_cat_org",
iconSvg: `<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18" fill="none"><path d="M13 18V15H9V5H7V8H0V0H7V3H13V0H20V8H13V5H11V13H13V10H20V18H13ZM2 2V6V2ZM15 12V16V12ZM15 2V6V2ZM15 6H18V2H15V6ZM15 16H18V12H15V16ZM2 6H5V2H2V6Z" fill="currentColor"
/></svg>`,
},
{
id: "UKM",
textKey: "skp_campus_cat_ukm",
iconSvg: `<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16" fill="none"><path d="M0 16V12C0 11.4333 0.195833 10.9583 0.5875 10.575C0.979167 10.1917 1.45 10 2 10H5.275C5.60833 10 5.925 10.0833 6.225 10.25C6.525 10.4167 6.76667 10.6417 6.95 10.925C7.43333 11.575 8.02917 12.0833 8.7375 12.45C9.44583 12.8167 10.2 13 11 13C11.8167 13 12.5792 12.8167 13.2875 12.45C13.9958 12.0833 14.5833 11.575 15.05 10.925C15.2667 10.6417 15.5208 10.4167 15.8125 10.25C16.1042 10.0833 16.4083 10 16.725 10H20C20.5667 10 21.0417 10.1917 21.425 10.575C21.8083 10.9583 22 11.4333 22 12V16H15V13.725C14.4167 14.1417 13.7875 14.4583 13.1125 14.675C12.4375 14.8917 11.7333 15 11 15C10.2833 15 9.58333 14.8875 8.9 14.6625C8.21667 14.4375 7.58333 14.1167 7 13.7V16H0ZM11 12C10.3667 12 9.76667 11.8542 9.2 11.5625C8.63333 11.2708 8.15833 10.8667 7.775 10.35C7.49167 9.93333 7.1375 9.60417 6.7125 9.3625C6.2875 9.12083 5.825 9 5.325 9C5.69167 8.38333 6.46667 7.89583 7.65 7.5375C8.83333 7.17917 9.95 7 11 7C12.05 7 13.1667 7.17917 14.35 7.5375C15.5333 7.89583 16.3083 8.38333 16.675 9C16.1917 9 15.7333 9.12083 15.3 9.3625C14.8667 9.60417 14.5083 9.93333 14.225 10.35C13.8583 10.8833 13.3917 11.2917 12.825 11.575C12.2583 11.8583 11.65 12 11 12ZM3 9C2.16667 9 1.45833 8.70833 0.875 8.125C0.291667 7.54167 0 6.83333 0 6C0 5.15 0.291667 4.4375 0.875 3.8625C1.45833 3.2875 2.16667 3 3 3C3.85 3 4.5625 3.2875 5.1375 3.8625C5.7125 4.4375 6 5.15 6 6C6 6.83333 5.7125 7.54167 5.1375 8.125C4.5625 8.70833 3.85 9 3 9ZM19 9C18.1667 9 17.4583 8.70833 16.875 8.125C16.2917 7.54167 16 6.83333 16 6C16 5.15 16.2917 4.4375 16.875 3.8625C17.4583 3.2875 18.1667 3 19 3C19.85 3 20.5625 3.2875 21.1375 3.8625C21.7125 4.4375 22 5.15 22 6C22 6.83333 21.7125 7.54167 21.1375 8.125C20.5625 8.70833 19.85 9 19 9ZM11 6C10.1667 6 9.45833 5.70833 8.875 5.125C8.29167 4.54167 8 3.83333 8 3C8 2.15 8.29167 1.4375 8.875 0.8625C9.45833 0.2875 10.1667 0 11 0C11.85 0 12.5625 0.2875 13.1375 0.8625C13.7125 1.4375 14 2.15 14 3C14 3.83333 13.7125 4.54167 13.1375 5.125C12.5625 5.70833 11.85 6 11 6Z"
fill="currentColor"/></svg>`,
},
{
id: "Komunitas",
textKey: "skp_campus_cat_com",
iconSvg: `<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12" fill="none"><path d="M12 20v-4"/><path d="M0 12V10.425C0 9.70833 0.366667 9.125 1.1 8.675C1.83333 8.225 2.8 8 4 8C4.21667 8 4.425 8.00417 4.625 8.0125C4.825 8.02083 5.01667 8.04167 5.2 8.075C4.96667 8.425 4.79167 8.79167 4.675 9.175C4.55833 9.55833 4.5 9.95833 4.5 10.375V12H0ZM6 12V10.375C6 9.84167 6.14583 9.35417 6.4375 8.9125C6.72917 8.47083 7.14167 8.08333 7.675 7.75C8.20833 7.41667 8.84583 7.16667 9.5875 7C10.3292 6.83333 11.1333 6.75 12 6.75C12.8833 6.75 13.6958 6.83333 14.4375 7C15.1792 7.16667 15.8167 7.41667 16.35 7.75C16.8833 8.08333 17.2917 8.47083 17.575 8.9125C17.8583 9.35417 18 9.84167 18 10.375V12H6ZM19.5 12V10.375C19.5 9.94167 19.4458 9.53333 19.3375 9.15C19.2292 8.76667 19.0667 8.40833 18.85 8.075C19.0333 8.04167 19.2208 8.02083 19.4125 8.0125C19.6042 8.00417 19.8 8 20 8C21.2 8 22.1667 8.22083 22.9 8.6625C23.6333 9.10417 24 9.69167 24 10.425V12H19.5ZM8.125 10H15.9C15.7333 9.66667 15.2708 9.375 14.5125 9.125C13.7542 8.875 12.9167 8.75 12 8.75C11.0833 8.75 10.2458 8.875 9.4875 9.125C8.72917 9.375 8.275 9.66667 8.125 10ZM4 7C3.45 7 2.97917 6.80417 2.5875 6.4125C2.19583 6.02083 2 5.55 2 5C2 4.43333 2.19583 3.95833 2.5875 3.575C2.97917 3.19167 3.45 3 4 3C4.56667 3 5.04167 3.19167 5.425 3.575C5.80833 3.95833 6 4.43333 6 5C6 5.55 5.80833 6.02083 5.425 6.4125C5.04167 6.80417 4.56667 7 4 7ZM20 7C19.45 7 18.9792 6.80417 18.5875 6.4125C18.1958 6.02083 18 5.55 18 5C18 4.43333 18.1958 3.95833 18.5875 3.575C18.9792 3.19167 19.45 3 20 3C20.5667 3 21.0417 3.19167 21.425 3.575C21.8083 3.95833 22 4.43333 22 5C22 5.55 21.8083 6.02083 21.425 6.4125C21.0417 6.80417 20.5667 7 20 7ZM12 6C11.1667 6 10.4583 5.70833 9.875 5.125C9.29167 4.54167 9 3.83333 9 3C9 2.15 9.29167 1.4375 9.875 0.8625C10.4583 0.2875 11.1667 0 12 0C12.85 0 13.5625 0.2875 14.1375 0.8625C14.7125 1.4375 15 2.15 15 3C15 3.83333 14.7125 4.54167 14.1375 5.125C13.5625 5.70833 12.85 6 12 6ZM12 4C12.2833 4 12.5208 3.90417 12.7125 3.7125C12.9042 3.52083 13 3.28333 13 3C13 2.71667 12.9042 2.47917 12.7125 2.2875C12.5208 2.09583 12.2833 2 12 2C11.7167 2 11.4792 2.09583 11.2875 2.2875C11.0958 2.47917 11 2.71667 11 3C11 3.28333 11.0958 3.52083 11.2875 3.7125C11.4792 3.90417 11.7167 4 12 4Z"
fill="currentColor"
/></svg>`,
},
];
const directoriesData = [
{
category: "Organisasi",
image: "images/bem-untan.webp",
titleKey: "skp_campus_dir_bem_title",
descKey: "skp_campus_dir_bem_desc",
},
{
category: "Organisasi",
image: "images/dpm-untan.png",
titleKey: "skp_campus_dir_dpm_title",
descKey: "skp_campus_dir_dpm_desc",
},
{
category: "Organisasi",
image: "images/hmif-untan.webp",
titleKey: "skp_campus_dir_hmif_title",
descKey: "skp_campus_dir_hmif_desc",
},
{
category: "Organisasi",
image: "images/cafatifa-untan.webp",
titleKey: "skp_campus_dir_cafa_title",
descKey: "skp_campus_dir_cafa_desc",
},
{
category: "UKM",
image: "images/mapala-untan.webp",
titleKey: "skp_campus_dir_mapala_title",
descKey: "skp_campus_dir_mapala_desc",
},
{
category: "UKM",
image: "images/lisma-untan.webp",
titleKey: "skp_campus_dir_lisma_title",
descKey: "skp_campus_dir_lisma_desc",
},
{
category: "UKM",
image: "images/lsmi-untan.png",
titleKey: "skp_campus_dir_lsmi_title",
descKey: "skp_campus_dir_lsmi_desc",
},
{
category: "UKM",
image: "images/sarang-semut-untan.png",
titleKey: "skp_campus_dir_semut_title",
descKey: "skp_campus_dir_semut_desc",
},
{
category: "Komunitas",
image: "images/aiesec-untan.png",
titleKey: "skp_campus_dir_aiesec_title",
descKey: "skp_campus_dir_aiesec_desc",
},
];
let currentActiveCategory = "Organisasi";
const buttonsRoot = document.getElementById("category-buttons-root");
const cardsRoot = document.getElementById("directory-cards-root");
function renderCategoryButtons() {
buttonsRoot.innerHTML = categoriesData
.map((cat) => {
const isActiveClass =
cat.id === currentActiveCategory ? "active" : "";
const displayCategoryText =
typeof t === "function" ? t(cat.textKey) : cat.id;
return `
<button class="category-btn ${isActiveClass}" onclick="handleCategoryChange('${cat.id}')">
${cat.iconSvg}
<p>${displayCategoryText}</p>
</button>
`;
})
.join("");
}
function renderDirectoryCards() {
const filteredData = directoriesData.filter(
(dir) => dir.category === currentActiveCategory,
);
cardsRoot.innerHTML = filteredData
.map((dir) => {
const displayTitle =
typeof t === "function" ? t(dir.titleKey) : dir.titleKey;
const displayDesc =
typeof t === "function" ? t(dir.descKey) : dir.descKey;
return `
<div class="directory-card">
<div class="img-wrapper">
<img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
</div>
<div class="card-info">
<h4>${displayTitle}</h4>
<p>${displayDesc}</p>
</div>
</div>
`;
})
.join("");
}
window.handleCategoryChange = function (newCategory) {
currentActiveCategory = newCategory;
renderCategoryButtons();
renderDirectoryCards();
};
renderCategoryButtons();
renderDirectoryCards();
document.addEventListener("languageChanged", () => {
renderCategoryButtons();
renderDirectoryCards();
});
</script>
<!-- JavaScript Destination Section -->
<script>
function createMapButton(href) {
const googleMapsIconSvg = `
<svg class="map-icon" viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.22778 8.64564C2.56277 9.07581 2.86767 9.52892 3.14028 10.0017C3.37302 10.4463 3.47004 10.7478 3.64013 11.2836C3.74444 11.5796 3.83872 11.6679 4.04141 11.6679C4.26228 11.6679 4.36249 11.5177 4.43991 11.2852C4.60069 10.7793 4.72685 10.3931 4.92588 10.0283C5.31643 9.32389 5.80173 8.69795 6.27857 8.09637C6.40766 7.92611 7.24229 6.9342 7.61804 6.15154C7.61804 6.15154 8.07986 5.2918 8.07986 4.09108C8.07986 2.96793 7.62441 2.18896 7.62441 2.18896L6.31316 2.54278L5.51685 4.656L5.31984 4.94739L5.28045 5.00018L5.22805 5.06626L5.13608 5.17181L5.00466 5.3042L4.29555 5.88629L2.5227 6.91766L2.22778 8.64564Z"
fill="#34A853"
/>
<path
d="M0.397949 6.007C0.830635 7.00279 1.66501 7.87815 2.22954 8.64634L5.22798 5.06763C5.22798 5.06763 4.80555 5.62428 4.03928 5.62428C3.18574 5.62428 2.4962 4.93753 2.4962 4.07159C2.4962 3.47777 2.85077 3.06982 2.85077 3.06982L0.815359 3.61935L0.397949 6.007Z"
fill="#FBBC04"
/>
<path
d="M5.2616 0.184082C6.25745 0.507595 7.10982 1.18677 7.62539 2.18828L5.22903 5.06558C5.22903 5.06558 5.5836 4.65026 5.5836 4.06013C5.5836 3.17402 4.84306 2.51205 4.04305 2.51205C3.28654 2.51205 2.85205 3.06777 2.85205 3.06777V1.25511L5.2616 0.184082Z"
fill="#4285F4"
/>
<path
d="M0.947266 1.45538C1.54206 0.738358 2.58866 0 4.03156 0C4.73161 0 5.25901 0.185178 5.25901 0.185178L2.84968 3.06931H1.14264L0.947266 1.45538Z"
fill="#1A73E8"
/>
<path
d="M0.398063 6.00692C0.398063 6.00692 0 5.22149 0 4.08365C0 3.00823 0.414917 2.06819 0.94734 1.45532L2.85111 3.06951L0.398063 6.00692Z"
fill="#EA4335"
/>
</svg>
`;
const buttonText =
typeof t === "function" ? t("skp_dest_open_maps") : "Open Maps";
return `
<a class="map-button-component" href="${href}" target="_blank" rel="noopener noreferrer">
${googleMapsIconSvg}
${buttonText}
</a>
`;
}
const destinationsData = [
{
image: "images/khatulistiwa.webp",
nameKey: "skp_dest_khatulistiwa_name",
descKey: "skp_dest_khatulistiwa_desc",
href: "https://maps.app.goo.gl/BUw4GWfSSDxvMCKA6",
},
{
image: "images/waterfront.webp",
nameKey: "skp_dest_waterfront_name",
descKey: "skp_dest_waterfront_desc",
href: "https://maps.app.goo.gl/2uo4jwNZtGTsvogU6",
},
{
image: "images/qubu-resort.webp",
nameKey: "skp_dest_qubu_name",
descKey: "skp_dest_qubu_desc",
href: "https://maps.app.goo.gl/dfLJPdFJMK9ifja66",
},
{
image: "images/rumah-radank.webp",
nameKey: "skp_dest_radank_name",
descKey: "skp_dest_radank_desc",
href: "https://maps.app.goo.gl/UqBchR3zimQSdTqW6",
},
{
image: "images/museum.webp",
nameKey: "skp_dest_museum_name",
descKey: "skp_dest_museum_desc",
href: "https://maps.app.goo.gl/2SWXaJB3D9VXx9Kg7",
},
{
image: "images/amalzone.jpg",
nameKey: "skp_dest_amalzone_name",
descKey: "skp_dest_amalzone_desc",
href: "https://maps.app.goo.gl/386expVMhHgMAmXA9",
},
{
image: "images/hutan-mangrove.jpg",
nameKey: "skp_dest_mangrove_name",
descKey: "skp_dest_mangrove_desc",
href: "#",
},
{
image: "images/mujahidin.webp",
nameKey: "skp_dest_mujahidin_name",
descKey: "skp_dest_mujahidin_desc",
href: "https://maps.app.goo.gl/zuvQv2CyH2yWayKp9",
},
];
const destGridContainer = document.getElementById(
"destination-grid-container",
);
function renderDestinationCards() {
destGridContainer.innerHTML = destinationsData
.map((dest) => {
const computedMapButton = createMapButton(dest.href);
// Menerjemahkan nama dan deskripsi destinasi secara dinamis
const displayName =
typeof t === "function" ? t(dest.nameKey) : dest.nameKey;
const displayDesc =
typeof t === "function" ? t(dest.descKey) : dest.descKey;
return `
<div class="destination-card" style="background-image: url('${dest.image}')">
<div class="card-overlay"></div>
<div class="card-content">
<h3 class="card-name">${displayName}</h3>
<p class="card-desc">${displayDesc}</p>
${computedMapButton}
</div>
</div>
`;
})
.join("");
}
renderDestinationCards();
document.addEventListener("languageChanged", () => {
renderDestinationCards();
});
</script>
<!-- JavaScript Culinary Section -->
<script>
const culinaryCategories = [
{ id: "RM", textKey: "skp_cul_cat_rm" },
{ id: "CS", textKey: "skp_cul_cat_cs" },
];
const cuisinesData = [
{
category: "RM",
image: "images/gebuk-sambalado.webp",
name: "Gebuk Sambalado",
descKey: "skp_cul_gebuk_desc",
href: "https://maps.app.goo.gl/J1xCUCqVyTqPStG6A",
},
{
category: "RM",
image: "images/kota-sari.webp",
name: "Kota Sari",
descKey: "skp_cul_sari_desc",
href: "https://maps.app.goo.gl/Tx5Rbt6TxCtFuiGdA",
},
{
category: "RM",
image: "images/good-mom.png",
name: "Good Mom",
descKey: "skp_cul_mom_desc",
href: "https://maps.app.goo.gl/2YUa1AQDKWfVQBJcA",
},
{
category: "RM",
image: "images/rice-n-shine.png",
name: "Rice n Shine",
descKey: "skp_cul_shine_desc",
href: "https://maps.app.goo.gl/mZoVi2A8EPVZQM5YA",
},
{
category: "RM",
image: "images/ayam-melepar.jpg",
name: "Ayam Melepar",
descKey: "skp_cul_melepar_desc",
href: "https://maps.app.goo.gl/DRbCvAS7EPAbxjvM6",
},
{
category: "RM",
image: "images/geprek-umi.jpg",
name: "Geprek Umi",
descKey: "skp_cul_umi_desc",
href: "https://maps.app.goo.gl/HV8X9qyLkjT7rULC7",
},
{
category: "CS",
image: "images/cw-coffee.jpg",
name: "CW Coffee",
descKey: "skp_cul_cw_desc",
href: "https://maps.app.goo.gl/xRJn6eM93PonZFfWA",
},
{
category: "CS",
image: "images/nordu-coffee.png",
name: "Nordu Coffee",
descKey: "skp_cul_nordu_desc",
href: "https://maps.app.goo.gl/hZ7NM8QT1msoVXxWA",
},
{
category: "CS",
image: "images/toko-kami.jpg",
name: "Toko Kami",
descKey: "skp_cul_kami_desc",
href: "https://maps.app.goo.gl/Nc9TX7aSQAJNr7es7",
},
{
category: "CS",
image: "images/lokale.png",
name: "Lokale",
descKey: "skp_cul_lokale_desc",
href: "https://maps.app.goo.gl/uZdp47HePFmJi7GH6",
},
{
category: "CS",
image: "images/weng-coffee.jpg",
name: "Weng Coffee",
descKey: "skp_cul_weng_desc",
href: "https://maps.app.goo.gl/EW3C4fjh4ZEpiRf18",
},
{
category: "CS",
image: "images/tropic.jpg",
name: "Tropic Coffee",
descKey: "skp_cul_tropic_desc",
href: "https://maps.app.goo.gl/b3P9QJMk4mBPHoQM9",
},
];
let activeCulinaryCategory = "RM";
const culinaryButtonsRoot = document.getElementById(
"culinary-buttons-root",
);
const culinaryCardsRoot = document.getElementById("culinary-cards-root");
function renderCulinaryButtons() {
culinaryButtonsRoot.innerHTML = culinaryCategories
.map((cat) => {
const isActive = cat.id === activeCulinaryCategory ? "active" : "";
const displayTabText =
typeof t === "function" ? t(cat.textKey) : cat.id;
return `
<button class="culinary-tab-btn ${isActive}" onclick="handleCulinaryCategoryChange('${cat.id}')">
${displayTabText}
</button>
`;
})
.join("");
}
function renderCulinaryCards() {
const filteredCuisines = cuisinesData.filter(
(item) => item.category === activeCulinaryCategory,
);
culinaryCardsRoot.innerHTML = filteredCuisines
.map((item) => {
const mapBtnHtml =
typeof createMapButton === "function"
? createMapButton(item.href)
: `<a href="${item.href}">Maps</a>`;
const displayDesc =
typeof t === "function" ? t(item.descKey) : item.descKey;
return `
<div class="culinary-card">
<img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
<div class="card-body">
<h3>${item.name}</h3>
<p>${displayDesc}</p>
${mapBtnHtml}
</div>
</div>
`;
})
.join("");
}
window.handleCulinaryCategoryChange = function (newCategory) {
activeCulinaryCategory = newCategory;
renderCulinaryButtons();
renderCulinaryCards();
};
renderCulinaryButtons();
renderCulinaryCards();
document.addEventListener("languageChanged", () => {
renderCulinaryButtons();
renderCulinaryCards();
});
</script>
<!-- JavaScript Living Cost Section -->
<script>
const SVG_ICONS = {
home: `<svg viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 24H7.5V15H16.5V24H21V10.5L12 3.75L3 10.5V24ZM0 27V9L12 0L24 9V27H13.5V18H10.5V27H0Z" fill="#FDB300"/></svg>`,
food: `<svg viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 30V16.275C3.225 15.925 2.15625 15.225 1.29375 14.175C0.43125 13.125 0 11.9 0 10.5V0H3V10.5H4.5V0H7.5V10.5H9V0H12V10.5C12 11.9 11.5688 13.125 10.7063 14.175C9.84375 15.225 8.775 15.925 7.5 16.275V30H4.5ZM19.5 30V18H15V7.5C15 5.425 15.7313 3.65625 17.1938 2.19375C18.6562 0.73125 20.425 0 22.5 0V30H19.5Z" fill="#FDB300"/></svg>`,
transport: `<svg viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.1772 5.55525C19.7057 5.26498 19.3236 4.84984 19.0734 4.35582C18.8232 3.8618 18.7147 3.30817 18.7598 2.75625L15.75 2.2275L16.0095 0.75L19.263 1.3215C19.5377 0.914514 19.9082 0.581188 20.3418 0.350777C20.7754 0.120367 21.259 -8.32561e-05 21.75 4.31759e-08H24.2887C24.5437 4.31759e-08 24.75 0.20625 24.75 0.46125V5.53875C24.75 5.79375 24.543 6 24.2887 6H24V12.1875C24.1625 12.141 24.3277 12.1027 24.4957 12.0727C25.6184 11.8749 26.775 12.0767 27.7643 12.6432C28.7536 13.2096 29.5131 14.1049 29.9108 15.1732C30.1455 15.8032 29.8957 16.3785 29.4652 16.7212C29.5023 17.717 29.1778 18.6925 28.5516 19.4675C27.9254 20.2426 27.0399 20.7648 26.0586 20.9378C25.0773 21.1108 24.0666 20.9228 23.2131 20.4086C22.3597 19.8943 21.7211 19.0886 21.4155 18.1402C21.0098 18.0037 20.6572 17.6977 20.5237 17.25H11.9843C11.8922 18.2761 11.4195 19.2306 10.6592 19.9258C9.89888 20.6209 8.90596 21.0064 7.87575 21.0064C6.84554 21.0064 5.85262 20.6209 5.0923 19.9258C4.33198 19.2306 3.8593 18.2761 3.76725 17.25H0.3525C0.307485 17.2513 0.262655 17.2437 0.220573 17.2277C0.17849 17.2116 0.13998 17.1875 0.107244 17.1565C0.0745076 17.1256 0.0481865 17.0885 0.029785 17.0474C0.0113835 17.0063 0.00126232 16.962 0 16.917C0 14.265 1.52025 11.9497 3.78 10.71C3.7601 10.6418 3.75 10.5711 3.75 10.5V8.25C3.75 7.65326 3.98705 7.08097 4.40901 6.65901C4.83097 6.23705 5.40326 6 6 6H12.75C13.3467 6 13.919 6.23705 14.341 6.65901C14.7629 7.08097 15 7.65326 15 8.25V10.5C15 10.6989 14.921 10.8897 14.7803 11.0303C14.6397 11.171 14.4489 11.25 14.25 11.25V12H18.93L20.1772 5.55525ZM20.25 3C20.25 2.60218 20.408 2.22064 20.6893 1.93934C20.9706 1.65804 21.3522 1.5 21.75 1.5H23.25V4.5H21.75C21.3522 4.5 20.9706 4.34196 20.6893 4.06066C20.408 3.77936 20.25 3.39782 20.25 3ZM18.639 13.5H14.25V15.75H18.204L18.639 13.5ZM19.7318 15.75H20.5988C20.8698 14.6062 21.545 13.5989 22.5 12.9135V6H21.6188L19.7318 15.75ZM22.9943 18.0495C23.2473 18.5554 23.657 18.966 24.1622 19.2203C24.6675 19.4745 25.2413 19.5588 25.7984 19.4606C26.3554 19.3624 26.8659 19.087 27.2537 18.6753C27.6416 18.2636 27.8862 17.7377 27.951 17.1757L22.9943 18.0495ZM5.25 8.25C5.25 8.05109 5.32902 7.86032 5.46967 7.71967C5.61032 7.57902 5.80109 7.5 6 7.5H12.75C12.9489 7.5 13.1397 7.57902 13.2803 7.71967C13.421 7.86032 13.5 8.05109 13.5 8.25V9.75H5.25V8.25ZM1.6305 15.75C2.2005 13.2262 4.58475 11.25 7.5645 11.25H12.75V15.726C12.7252 15.742 12.6963 15.7504 12.6667 15.75H1.6305ZM10.2142 17.2672C10.3087 17.2702 10.3937 17.2735 10.4692 17.277C10.3736 17.8964 10.0595 18.4612 9.58366 18.8692C9.10785 19.2771 8.50177 19.5014 7.875 19.5014C7.24823 19.5014 6.64215 19.2771 6.16634 18.8692C5.69053 18.4612 5.3764 17.8964 5.28075 17.277C5.35625 17.273 5.44125 17.2697 5.53575 17.2672C6.08775 17.25 6.8325 17.25 7.875 17.25C8.9175 17.25 9.66225 17.25 10.215 17.2672M27.279 14.1097C26.7849 13.7637 26.207 13.5564 25.6056 13.5094C25.0042 13.4624 24.4011 13.5775 23.8593 13.8427C23.3174 14.1079 22.8565 14.5135 22.5 15.0172C22.1927 15.521 22.0019 16.1045 21.972 16.707L28.4535 15.564C28.2068 14.9781 27.7997 14.4745 27.279 14.1097Z" fill="#FDB300"/></svg>`,
};
const livingCostDetailsData = [
{
iconSvg: SVG_ICONS.home,
typeKey: "skp_cost_type_home",
price: "+-600k",
},
{
iconSvg: SVG_ICONS.food,
typeKey: "skp_cost_type_food",
price: "+-750k",
},
{
iconSvg: SVG_ICONS.transport,
typeKey: "skp_cost_type_transport",
price: "+-250k",
},
];
const costCardsRoot = document.getElementById("cost-cards-root");
function renderLivingCostCards() {
costCardsRoot.innerHTML = livingCostDetailsData
.map((detail) => {
const displayType =
typeof t === "function" ? t(detail.typeKey) : detail.typeKey;
const displayPeriod =
typeof t === "function" ? t("skp_cost_period") : "per bulan";
return `
<div class="cost-item-card">
${detail.iconSvg}
<p class="cost-type">${displayType}</p>
<p class="cost-price">Rp ${detail.price}</p>
<p class="cost-period">${displayPeriod}</p>
</div>
`;
})
.join("");
}
renderLivingCostCards();
document.addEventListener("languageChanged", () => {
renderLivingCostCards();
});
</script>
</body>
</html>
View Git Blame Copy Permalink