forked from izu/student-web-if-development-kit
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ilham_gmail
|
caf930dd45 |
+18
-250
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -1155,7 +1155,7 @@
|
||||
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
||||
class="absolute inset-0 w-full h-full object-cover z-0" />
|
||||
|
||||
<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>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
||||
|
||||
@@ -1239,31 +1239,36 @@
|
||||
</div>
|
||||
|
||||
<!-- ─── 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>
|
||||
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
||||
|
||||
<!-- 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;">
|
||||
<!-- 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-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
|
||||
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 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 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-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
|
||||
<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; background-color: #feb401; color: #003150;">
|
||||
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
|
||||
Inklusivitas &<br>Kolaborasi
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2080,243 +2085,6 @@
|
||||
</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]');
|
||||
|
||||
+6
-47
@@ -1,47 +1,6 @@
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--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; }
|
||||
/*
|
||||
* LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
|
||||
*
|
||||
* CSS utama ada di: assets/css/output.css (Tailwind custom build)
|
||||
* File ini tersedia untuk CSS tambahan jika diperlukan.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user