Merge remote-tracking branch 'origin/main' into fix/divisi-kepengurusan-hover

Reviewed-on: #5

assets/global/localization.js

@@ -569,6 +569,78 @@ const translations = {
         kontrib_guideline_3: "Sertakan fakta dan data yang akurat dan dapat diverifikasi.",
         kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.",
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
+
+        grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
+        grp_limaem_hero_title: "Kehidupan Mahasiswa & <span style=\"color:#f5c82f;\">Himpunan (HMIF)</span>",
+        grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
+        grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
+
+        grp_limaem_about_title: "Ruang Tumbuh Bagi Mahasiswa Informatika",
+        grp_limaem_about_p1: "Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa pendidikan formal adalah fondasi, namun komunitas adalah akselerator.",
+        grp_limaem_about_p2: "Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan dan integritas ilmiah.",
+        grp_limaem_about_stat_students: "Mahasiswa Aktif",
+        grp_limaem_about_stat_partners: "MITRA",
+        grp_limaem_about_badge: "Inklusivitas & Kolaborasi",
+
+        grp_limaem_partners_title: "Partner dan Kolaborator",
+
+        grp_limaem_divisi_title: "Divisi Kepengurusan HMIF",
+        grp_limaem_divisi_desc: "Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.",
+        grp_limaem_divisi_b1_label: "Bidang 1",
+        grp_limaem_divisi_b1_title: "Pengembangan Sumber Daya Mahasiswa dan Kaderisasi",
+        grp_limaem_divisi_b1_desc: "Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru, workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan menjaga regenerasi organisasi.",
+        grp_limaem_divisi_b2_label: "Bidang 2",
+        grp_limaem_divisi_b2_title: "Media Komunikasi dan Konten Digital",
+        grp_limaem_divisi_b2_desc: "Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.",
+        grp_limaem_divisi_b3_label: "Bidang 3",
+        grp_limaem_divisi_b3_title: "Inovasi dan Kompetisi Teknologi",
+        grp_limaem_divisi_b3_desc: "Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal, bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website dan dashboard untuk mendukung ekosistem inovasi HMIF.",
+        grp_limaem_divisi_b4_label: "Bidang 4",
+        grp_limaem_divisi_b4_title: "Pengembangan Organisasi",
+        grp_limaem_divisi_b4_desc: "Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur dan efisien.",
+        grp_limaem_divisi_b5_label: "Bidang 5",
+        grp_limaem_divisi_b5_title: "Sosial Masyarakat",
+        grp_limaem_divisi_b5_desc: "Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.",
+        grp_limaem_divisi_b6_label: "Bidang 6",
+        grp_limaem_divisi_b6_title: "Kewirausahaan dan Kemitraan",
+        grp_limaem_divisi_b6_desc: "Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif, dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan profesional.",
+
+        grp_limaem_kegiatan_title: "Kegiatan Unggulan",
+        grp_limaem_kegiatan_subtitle: "Kegiatan tahunan yang menjadi ikon Informatika UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Silaturahmi Keluarga Besar Informatika",
+        grp_limaem_kegiatan_c1_desc: "Kegiatan buka bersama seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. Wadah bagi mahasiswa Informatika UNTAN untuk unjuk gigi di bidang programming, cyber security, data mining, hingga UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Perayaan 17 Agustus",
+        grp_limaem_kegiatan_c3_desc: "Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik. Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.",
+        grp_limaem_kegiatan_c4_title: "Bootcamp HMIF",
+        grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
+        grp_limaem_kegiatan_c6_title: "Study Excursion",
+        grp_limaem_kegiatan_c6_desc: "Study Excursion menjadi pengalaman berharga bagi mahasiswa semester 5 untuk belajar di luar kampus, memperluas wawasan, mengenal suasana baru, serta menciptakan kenangan berkesan bersama selama perjalanan.",
+        grp_limaem_kegiatan_c7_title: "INFORMERS",
+        grp_limaem_kegiatan_c7_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
+
+        grp_limaem_sc_title: "STUDY CLUB",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan algoritma Machine Learning, membedah teknik klasifikasi, hingga melatih model prediktif untuk menghasilkan insight yang bermakna.",
+        grp_limaem_sc_sd_title: "Software Development (Segera Hadir)",
+        grp_limaem_sc_sd_desc: "Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang frontend yang interaktif, membangun backend yang tangguh, serta mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.",
+
+        grp_limaem_galeri_title: "Galeri Keseruan",
+
+        grp_limaem_cta_title: "Ada yang Ingin Ditanyakan Seputar HMIF?",
+        grp_limaem_cta_desc: "Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.",
+        grp_limaem_cta_btn: "Hubungi Kami",
+        grp_limaem_cta_info1_label: "Sekretariat",
+        grp_limaem_cta_info1_val: "Gedung Fakultas Teknik Lt. 2, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Jam Operasional",
+        grp_limaem_cta_info2_val: "Senin - Jumat, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Media Sosial",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     },
 
     en: {
@@ -1135,6 +1207,78 @@ const translations = {
         kontrib_guideline_3: "Include accurate and verifiable facts and data.",
         kontrib_guideline_4: "Avoid plagiarism. Work must be original.",
         kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
+
+        grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
+        grp_limaem_hero_title: "Student Life & <span style=\"color:#f5c82f;\">Student Association (HMIF)</span>",
+        grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
+        grp_limaem_hero_btn: "View Organizational Structure",
+
+        grp_limaem_about_title: "A Space to Grow for Informatics Students",
+        grp_limaem_about_p1: "The Informatics Student Association (HMIF) of Tanjungpura University is more than just an organization — it is a home for technology leaders. We believe that formal education is the foundation, but community is the accelerator.",
+        grp_limaem_about_p2: "Through various initiatives, we bridge the gap between academic curriculum and industry needs, while maintaining the spirit of kinship and academic integrity.",
+        grp_limaem_about_stat_students: "Active Students",
+        grp_limaem_about_stat_partners: "PARTNERS",
+        grp_limaem_about_badge: "Inclusivity & Collaboration",
+
+        grp_limaem_partners_title: "Partners and Collaborators",
+
+        grp_limaem_divisi_title: "HMIF Organizational Divisions",
+        grp_limaem_divisi_desc: "An organizational structure designed for efficiency and capacity building across various strategic fields.",
+        grp_limaem_divisi_b1_label: "Division 1",
+        grp_limaem_divisi_b1_title: "Student Development and Cadre Regeneration",
+        grp_limaem_divisi_b1_desc: "This division organizes structured cadre programs, regular mentoring, and leadership and soft-skill training. Its activities include new member onboarding, leadership workshops, collaborative projects, and community service that fosters social responsibility. The focus is on preparing competent cadres and sustaining organizational regeneration.",
+        grp_limaem_divisi_b2_label: "Division 2",
+        grp_limaem_divisi_b2_title: "Communication Media and Digital Content",
+        grp_limaem_divisi_b2_desc: "This division manages HMIF's communication strategy and content production, including editorial planning, social media management, and event documentation. Its work programs include creating promotional materials, publishing activities, and strengthening digital identity to deliver consistent and engaging organizational information.",
+        grp_limaem_divisi_b3_label: "Division 3",
+        grp_limaem_divisi_b3_title: "Innovation and Technology Competition",
+        grp_limaem_divisi_b3_desc: "This division facilitates competition preparation and technical project development through coaching clinics, project-based bootcamps, and study clubs for Competitive Programming, Software Development, and Data/ML. Activities include internal selection, competitive coaching, and digitalization initiatives such as website and dashboard development to support HMIF's innovation ecosystem.",
+        grp_limaem_divisi_b4_label: "Division 4",
+        grp_limaem_divisi_b4_title: "Organizational Development",
+        grp_limaem_divisi_b4_desc: "This division strengthens internal governance and capabilities through board training, simple SOP drafting, and work process evaluation. Its programs include organizational culture development, improved coordination effectiveness, and professionalism initiatives, making HMIF operations more structured and efficient.",
+        grp_limaem_divisi_b5_label: "Division 5",
+        grp_limaem_divisi_b5_title: "Community Engagement",
+        grp_limaem_divisi_b5_desc: "This division designs and implements impactful community service programs and social actions, including community assistance and humanitarian aid. Activities cover field needs assessment, structured implementation, and impact evaluation to ensure sustainability and tangible benefits for the community.",
+        grp_limaem_divisi_b6_label: "Division 6",
+        grp_limaem_divisi_b6_title: "Entrepreneurship and Partnerships",
+        grp_limaem_divisi_b6_desc: "This division develops organizational business units, designs creative funding schemes, and establishes strategic partnerships to support the sustainability of HMIF programs. Its work units include business opportunity research, partnership proposal development, and sponsorship management to enhance financial independence and professional networking access.",
+
+        grp_limaem_kegiatan_title: "Flagship Events",
+        grp_limaem_kegiatan_subtitle: "Annual events that have become icons of Informatics UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Informatics Family Gathering",
+        grp_limaem_kegiatan_c1_desc: "An annual iftar gathering held with the entire Informatics UNTAN family, a tradition maintained every year.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "A prestigious national-level IT competition held annually by the Ministry. A platform for Informatics UNTAN students to showcase their skills in programming, cyber security, data mining, and UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Independence Day Celebration",
+        grp_limaem_kegiatan_c3_desc: "A celebration of Indonesian Independence Day filled with exciting competitions. A fun event to strengthen nationalism and the sense of kinship among Informatics students.",
+        grp_limaem_kegiatan_c4_title: "HMIF Bootcamp",
+        grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
+        grp_limaem_kegiatan_c6_title: "Study Excursion",
+        grp_limaem_kegiatan_c6_desc: "Study Excursion is a valuable experience for 5th semester students to study outside the campus, broaden their horizons, get to know new atmospheres, and create memorable memories together during the trip.",
+        grp_limaem_kegiatan_c7_title: "INFORMERS",
+        grp_limaem_kegiatan_c7_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
+
+        grp_limaem_sc_title: "STUDY CLUBS",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Learn logic and algorithms together, where you can grow and open opportunities to participate in programming competitions at various levels.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Uncover hidden potential from mountains of data! Here we explore Machine Learning algorithms, dissect classification techniques, and train predictive models to generate meaningful insights.",
+        grp_limaem_sc_sd_title: "Software Development (Coming Soon)",
+        grp_limaem_sc_sd_desc: "Turn your ideas into real digital products! We will code together — from designing interactive frontends and building robust backends, to integrating various APIs to create modern web applications.",
+
+        grp_limaem_galeri_title: "Fun Gallery",
+
+        grp_limaem_cta_title: "Have Questions About HMIF?",
+        grp_limaem_cta_desc: "Join HMIF to expand your network, sharpen your skills, and create real impact.",
+        grp_limaem_cta_btn: "Contact Us",
+        grp_limaem_cta_info1_label: "Secretariat",
+        grp_limaem_cta_info1_val: "Engineering Faculty Building, 2nd Floor, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Office Hours",
+        grp_limaem_cta_info2_val: "Monday - Friday, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Social Media",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     }
 };
 

groups/LimaEm/assets/js/main.js

@@ -16,7 +16,7 @@
 
 (function () {
     var mobileMenuButton = document.getElementById('mobile-menu-button');
-    var mobileMenu       = document.getElementById('mobile-menu');
+    var mobileMenu = document.getElementById('mobile-menu');
 
     if (!mobileMenuButton || !mobileMenu) return;
 
@@ -346,15 +346,15 @@
     var AUTO_DELAY_MS = 4000; // 4 detik per slide
     var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
 
-    var track   = document.getElementById('galeri-track');
+    var track = document.getElementById('galeri-track');
     var viewport = document.getElementById('galeri-viewport');
-    var prevBtn  = document.getElementById('galeri-prev');
-    var nextBtn  = document.getElementById('galeri-next');
+    var prevBtn = document.getElementById('galeri-prev');
+    var nextBtn = document.getElementById('galeri-next');
     var dotsContainer = document.getElementById('galeri-dots');
 
     if (!track || !viewport || !prevBtn || !nextBtn) return;
 
-    var currentSlide  = 0;
+    var currentSlide = 0;
     var autoSlideTimer;
     var originalHTML = track.innerHTML;
 
@@ -395,7 +395,7 @@
             var btn = document.createElement('button');
             btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
             btn.setAttribute('data-index', String(i));
-            btn.setAttribute('aria-label', 'Slide ' + (i+1));
+            btn.setAttribute('aria-label', 'Slide ' + (i + 1));
             (function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
             dotsContainer.appendChild(btn);
         }
@@ -465,14 +465,14 @@
 // =============================================================================
 
 (function () {
-    var TOTAL_CARDS   = 6;
+    var TOTAL_CARDS = 7;
     var AUTO_DELAY_MS = 2000;
-    var GAP_PX        = 32; // gap-8 = 2rem = 32px (tailwind)
+    var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
 
-    var track    = document.getElementById('slider-track');
+    var track = document.getElementById('slider-track');
     var viewport = document.getElementById('slider-viewport');
-    var prevBtn  = document.getElementById('slider-prev');
-    var nextBtn  = document.getElementById('slider-next');
+    var prevBtn = document.getElementById('slider-prev');
+    var nextBtn = document.getElementById('slider-next');
     var dotsContainer = document.getElementById('slider-dots');
 
     if (!track || !viewport || !prevBtn || !nextBtn) return;
@@ -518,9 +518,10 @@
         dotsContainer.innerHTML = '';
         for (var i = 0; i < n; i++) {
             var btn = document.createElement('button');
-            btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
+            btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
+            if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
             btn.setAttribute('data-index', String(i));
-            btn.setAttribute('aria-label', 'Slide ' + (i+1));
+            btn.setAttribute('aria-label', 'Slide ' + (i + 1));
             (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
             dotsContainer.appendChild(btn);
         }

groups/LimaEm/style.css

@@ -22,7 +22,27 @@ body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); backgr
 .hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
 
 .layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
-@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+@media (min-width: 1024px) { 
+    .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } 
+    /* Fix tinggi grid Galeri Keseruan (Desktop) */
+    .galeri-grid {
+        height: 500px !important;
+    }
+}
+
+/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
+@media (min-width: 768px) {
+
+    /* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
+    .md-card-half {
+        width: calc(50% - 16px) !important;
+    }
+
+    /* Fix tinggi grid Galeri Keseruan (Tablet) */
+    .galeri-grid {
+        height: 420px !important;
+    }
+}
 
 .meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
 .cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
@@ -45,3 +65,30 @@ body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); backgr
 .footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
 .footer-logo { height: 28px; width: auto; }
 .footer-ornament { width: 100%; display: block; opacity: .9; }
+
+/* ===== Slider Dot Indicators ===== */
+.slider-dot,
+.galeri-dot {
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    min-width: 10px;
+    border-radius: 9999px;
+    background-color: #d1d5db; /* gray-300 fallback */
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    transition: width 0.3s ease, background-color 0.3s ease;
+    flex-shrink: 0;
+}
+
+.slider-dot.bg-hmif-primary,
+.galeri-dot.bg-hmif-primary {
+    background-color: #0b2f4c; /* --color-hmif-primary dari output.css */
+    width: 24px;
+}
+
+/* Fix: title divisi berubah kuning saat hover */
+#divisi .group:hover h3 {
+    color: #f5c82f !important;
+}

package-lock.json

@@ -917,7 +917,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },