Merge branch 'feature/konten-Lima-em'

Reviewed-on: #3

assets/global/localization.js

@@ -571,7 +571,7 @@ const translations = {
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
 
         grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
-        grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
+        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",
 
@@ -617,8 +617,10 @@ const translations = {
         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: "INFORMERS",
+        grp_limaem_kegiatan_c6_title: "Study Excursion",
-        grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
+        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",
@@ -1207,7 +1209,7 @@ const translations = {
         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 & Student Association (HMIF)",
+        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",
 
@@ -1253,8 +1255,10 @@ const translations = {
         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: "INFORMERS",
+        grp_limaem_kegiatan_c6_title: "Study Excursion",
-        grp_limaem_kegiatan_c6_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
+        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",

fix.js

@@ -1,73 +0,0 @@
-const fs = require('fs'); 
-let c = fs.readFileSync('groups/LimaEm/index.html', 'utf8');
-
-const oldHeroGrad = '<div class=\"absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0\"></div>';
-const newHeroGrad = '<div class=\"absolute inset-0 z-0\" style=\"background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);\"></div>';
-c = c.replace(oldHeroGrad, newHeroGrad);
-
-const oldPhotoStr = \<!-- --- Right: Photo --- -->
-                            <div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
-
-                                <!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
-                                <div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
-                                            bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
-
-                                <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
-                                <div
-                                    class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
-                                    <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
-                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
-                                     transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
-                                    <!-- Gradient overlay bawah -->
-                                    <div class="absolute inset-0
-                                    bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
-                                    opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
-                                </div>
-
-                                <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
-                                <div class="absolute z-20 bottom-[-3%] left-[0%]
-                                            bg-hmif-secondary text-hmif-primary
-                                            rounded-xl px-4 py-3 text-center shadow-2xl
-                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                                        stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-                                    </svg>
-                                    <p class="text-[11px] lg:text-xs font-bold leading-snug">
-                                        Inklusivitas &<br>Kolaborasi
-                                    </p>
-                                </div>
-                            </div>\;
-const newPhotoStr = \<!-- --- Right: Photo --- -->
-                            <div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
-                                <!-- Offset shadow block biru tua -->
-                                <div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
-
-                                <!-- Frame foto -->
-                                <div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
-                                    <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
-                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" 
-                                        class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
-                                    <!-- Gradient overlay bawah -->
-                                    <div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
-                                </div>
-
-                                <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
-                                <div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
-                                            bg-hmif-secondary text-hmif-primary
-                                            rounded-xl px-4 py-3 text-center shadow-2xl
-                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
-                                        stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-                                    </svg>
-                                    <p class="text-[11px] lg:text-xs font-bold leading-snug">
-                                        Inklusivitas &<br>Kolaborasi
-                                    </p>
-                                </div>
-                            </div>\;
-c = c.replace(oldPhotoStr, newPhotoStr);
-fs.writeFileSync('groups/LimaEm/index.html', c);
-console.log('HTML layout fixed');

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 prevBtn = document.getElementById('galeri-prev');
-    var nextBtn  = document.getElementById('galeri-next');
+    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 prevBtn = document.getElementById('slider-prev');
-    var nextBtn  = document.getElementById('slider-next');
+    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

@@ -45,3 +45,26 @@ 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;
+}
+

package-lock.json

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