feat(lima-em): migrasi seluruh konten section dan script ke development kit

Reviewed-on: #1

groups/LimaEm/index.html

@@ -1594,7 +1594,7 @@
                                     <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                            <img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
+                                            <img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
@@ -1618,7 +1618,7 @@
                                     <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                            <img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
+                                            <img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
@@ -1790,7 +1790,7 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1798,7 +1798,7 @@
                                             <a href="https://instagram.com/hmif_ftuntan" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik"
+                                                <img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1806,7 +1806,7 @@
                                             <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
                                                 target="_blank" rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
+                                                <img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1814,7 +1814,7 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1828,7 +1828,7 @@
                                             <!-- Foto besar kiri -->
                                             <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
                                                 class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
+                                                <img src=".\assets\images\galeri-keseruan\DSCF8922.JPG"
                                                     alt="Ulang Tahun Informatika"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
@@ -1837,14 +1837,14 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
                                             <!-- Foto kecil kanan atas 2 -->
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC03316.jpg"
+                                                <img src=".\assets\images\galeri-keseruan\DSC03316.JPG"
                                                     alt="Silaturahmi Keluarga Besar Informatika"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
@@ -1853,7 +1853,7 @@
                                             <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
                                                 target="_blank" rel="noopener noreferrer"
                                                 class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
+                                                <img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1868,7 +1868,7 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1876,7 +1876,7 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1884,7 +1884,7 @@
                                             <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
                                                 target="_blank" rel="noopener noreferrer"
                                                 class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
+                                                <img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -1892,7 +1892,7 @@
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
                                                 rel="noopener noreferrer"
                                                 class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
+                                                <img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
 
@@ -2085,6 +2085,243 @@
         </div>
     </footer>
 
+    <script>
+        // =============================================================================
+        // main.js — Logika Interaksi Halaman HMIF
+        //
+        // Struktur:
+        //   1. Galeri Keseruan    — Slider bento grid foto keseruan
+        //   2. Kegiatan Unggulan  — Slider kartu kegiatan tahunan
+        // =============================================================================
+
+        // =============================================================================
+        // 1. GALERI KESERUAN — SLIDER
+        // Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
+        // dot indicator, pause on hover, dan recalculate on resize.
+        // =============================================================================
+
+        (function () {
+            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 viewport = document.getElementById('galeri-viewport');
+            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 autoSlideTimer;
+            var originalHTML = track.innerHTML;
+
+            // collect all anchor elements (images) in the original order
+            var originalAnchors = Array.from((function () {
+                var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
+            })().querySelectorAll('a'));
+
+            // builds slides where each slide contains a single image (for small screens)
+            function buildSingleImageSlides() {
+                var slides = originalAnchors.map(function (a) {
+                    // clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
+                    try {
+                        var clone = a.cloneNode(true);
+                        if (clone.classList) clone.classList.remove('hidden');
+                        // also remove inline style display:none if present
+                        if (clone.style) clone.style.display = '';
+                        return '<div class="flex-shrink-0 w-full">' +
+                            '<div class="aspect-video w-full overflow-hidden rounded-xl">' +
+                            clone.outerHTML +
+                            '</div></div>';
+                    } catch (e) {
+                        return '';
+                    }
+                });
+                return slides.join('');
+            }
+
+            function getTotalSlides() {
+                return track.children.length;
+            }
+
+            // render dot buttons dynamically according to total slides
+            function renderDots(n) {
+                if (!dotsContainer) return;
+                dotsContainer.innerHTML = '';
+                for (var i = 0; i < n; i++) {
+                    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));
+                    (function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
+                    dotsContainer.appendChild(btn);
+                }
+            }
+
+            function updateDots(activeIndex) {
+                if (!dotsContainer) return;
+                var dots = dotsContainer.querySelectorAll('button');
+                dots.forEach(function (dot, i) {
+                    if (i === activeIndex) {
+                        dot.classList.remove('bg-gray-200', 'w-2.5');
+                        dot.classList.add('bg-hmif-primary', 'w-6');
+                    } else {
+                        dot.classList.remove('bg-hmif-primary', 'w-6');
+                        dot.classList.add('bg-gray-200', 'w-2.5');
+                    }
+                });
+            }
+
+            function rebuildTrackForViewport() {
+                var isMobile = window.innerWidth < 768; // md breakpoint
+                if (isMobile) {
+                    track.innerHTML = buildSingleImageSlides();
+                } else {
+                    track.innerHTML = originalHTML;
+                }
+                renderDots(getTotalSlides());
+            }
+
+            // Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
+            function goToSlide(index) {
+                var total = getTotalSlides();
+                if (total === 0) return;
+                currentSlide = ((index % total) + total) % total;
+                track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
+                updateDots(currentSlide);
+            }
+
+            // Mulai atau restart timer auto-slide
+            function startAutoSlide() {
+                clearInterval(autoSlideTimer);
+                autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
+            }
+
+            prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
+            nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
+
+            // Pause saat kursor di atas galeri
+            viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
+            viewport.addEventListener('mouseleave', startAutoSlide);
+
+            // Recalculate posisi slide saat browser di-resize
+            window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
+
+            // initial build
+            rebuildTrackForViewport();
+            goToSlide(0);
+            startAutoSlide();
+        })();
+
+
+        // =============================================================================
+        // 2. KEGIATAN UNGGULAN — SLIDER
+        // Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
+        // dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
+        // selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
+        // =============================================================================
+
+        (function () {
+            var TOTAL_CARDS   = 6;
+            var AUTO_DELAY_MS = 2000;
+            var GAP_PX        = 32; // gap-8 = 2rem = 32px (tailwind)
+
+            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 dotsContainer = document.getElementById('slider-dots');
+
+            if (!track || !viewport || !prevBtn || !nextBtn) return;
+
+            var current = 0;
+            var autoTimer;
+
+            function getCardsVisible() {
+                return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
+            }
+
+            // lebar kartu yang terlihat (tidak termasuk gap)
+            function getCardWidth() {
+                var visible = getCardsVisible();
+                if (visible === 1) return viewport.offsetWidth;
+                return (viewport.offsetWidth - GAP_PX) / visible;
+            }
+
+            function getMaxIndex() {
+                return Math.max(0, TOTAL_CARDS - getCardsVisible());
+            }
+
+            // Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
+            function goTo(index) {
+                var maxIndex = getMaxIndex();
+                current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
+
+                if (getCardsVisible() === 1) {
+                    // langkah pergeseran = viewport width + gap
+                    var step = viewport.offsetWidth + GAP_PX;
+                    track.style.transform = 'translateX(-' + (current * step) + 'px)';
+                } else {
+                    var cardW = getCardWidth();
+                    track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
+                }
+
+                updateDots(current);
+            }
+
+            // Render dot indicators dynamically based on total slides
+            function renderSliderDots(n) {
+                if (!dotsContainer) return;
+                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.setAttribute('data-index', String(i));
+                    btn.setAttribute('aria-label', 'Slide ' + (i+1));
+                    (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
+                    dotsContainer.appendChild(btn);
+                }
+            }
+
+            function updateDots(activeIndex) {
+                if (!dotsContainer) return;
+                var dots = dotsContainer.querySelectorAll('button');
+                dots.forEach(function (dot, i) {
+                    if (i === activeIndex) {
+                        dot.classList.remove('bg-gray-200', 'w-2.5');
+                        dot.classList.add('bg-hmif-primary', 'w-6');
+                    } else {
+                        dot.classList.remove('bg-hmif-primary', 'w-6');
+                        dot.classList.add('bg-gray-200', 'w-2.5');
+                    }
+                });
+            }
+
+            // Mulai atau restart timer auto-slide
+            function startAuto() {
+                clearInterval(autoTimer);
+                autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
+            }
+
+            prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
+            nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
+
+            // initial render of dots according to current viewport
+            renderSliderDots(getMaxIndex() + 1);
+
+            // Pause saat kursor di atas slider
+            viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
+            viewport.addEventListener('mouseleave', startAuto);
+
+            // Recalculate posisi slide and dots saat browser di-resize
+            window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
+
+            goTo(0);
+            startAuto();
+        })();
+    </script>
+
     <script>
         (function () {
             const menuItems = document.querySelectorAll('[data-menu]');

groups/LimaEm/style.css

@@ -1,6 +1,47 @@
-/*
+:root {
- * LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
+    --brand-navy: #003150;
- *
+    --brand-yellow: #feb401;
- * CSS utama ada di: assets/css/output.css (Tailwind custom build)
+    --text-main: #1e293b;
- * File ini tersedia untuk CSS tambahan jika diperlukan.
+    --text-soft: #64748b;
- */
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.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); } }
+
+.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; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.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; }