MuhammadFarras/student-web-if-development-kit
1
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests 1 Activity

menyesuaikan layout setelah migrasi ke html, terkhusus pada layout card achievement dan portofolio

Browse Source
This commit is contained in:
BobbyAndrean
2026-06-04 20:19:00 +07:00
parent 09498578e9
commit 141eeeb629
3 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/ACAAB/index.html
+14 -14
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
@@ -1177,7 +1177,7 @@
style="background:rgba(254,180,1,0.08);filter:blur(80px);margin-right:-5rem;margin-top:-5rem;">
</div>
<div class="container mx-auto px-4" style="max-width:1100px;">
<div class="container mx-auto px-4 lg:px-8">
<div style="display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;"
class="lg-hero-grid">
<!-- Left: text -->
@@ -1260,7 +1260,7 @@
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
0</div>
<div
style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
Prestasi<br>Mahasiswa</div>
</div>
<!-- Internasional -->
@@ -1268,7 +1268,7 @@
<div id="stat-intl"
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
0</div>
<div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
<div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
data-i18n="grp_acaab_stats_intl">Internasional</div>
</div>
<!-- Nasional -->
@@ -1276,7 +1276,7 @@
<div id="stat-national"
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
0</div>
<div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
<div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
data-i18n="grp_acaab_stats_national">Nasional</div>
</div>
<!-- Regional -->
@@ -1284,7 +1284,7 @@
<div id="stat-regional"
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
0</div>
<div style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
<div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
data-i18n="grp_acaab_stats_regional">Regional</div>
</div>
<!-- Proyek Mahasiswa (total) -->
@@ -1293,7 +1293,7 @@
style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
0</div>
<div
style="font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
Proyek<br>Mahasiswa</div>
</div>
</div>
@@ -1355,7 +1355,7 @@
<!-- Cards grid -->
<div id="acaab-ach-grid"
style="display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;">
style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;justify-content:center;">
</div>
<!-- Pagination buttons -->
@@ -1371,13 +1371,13 @@
<!-- ── PROJECT CAROUSEL ───────────────────────────────────────────────── -->
<section id="acaab-proj-section" class="not-prose acaab-full-bleed" style="padding:2.5rem 0 3rem;background:#f8fafc;">
<div class="container mx-auto px-4" style="max-width:1100px;">
<div class="container mx-auto px-4 lg:px-8">
<!-- Section header row: title + scroll buttons (seperti di React source) -->
<div
style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
<div>
style="display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;">
<div style="flex:1;min-width:250px;">
<h2 style="font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#003150;margin:0 0 0.5rem;font-family:'Roboto Condensed',sans-serif;"
data-i18n="grp_acaab_proj_title">Top Projects &amp; Portofolio</h2>
data-i18n="grp_acaab_proj_title">Top Projects Portofolio</h2>
<p style="color:#64748b;font-size:1rem;max-width:42rem;margin:0;line-height:1.6;"
data-i18n="grp_acaab_proj_desc">Jelajahi inovasi digital dan aplikasi nyata yang dikembangkan oleh mahasiswa Informatika UNTAN.</p>
</div>
@@ -1444,8 +1444,8 @@
<!-- ── CTA ────────────────────────────────────────────────────────────── -->
<section class="not-prose acaab-full-bleed bg-untan-navy"
style="padding:3.5rem 0;">
<div class="container mx-auto px-4" style="max-width:1100px;">
style="padding:3.5rem 0; margin-bottom:-3rem;">
<div class="container mx-auto px-4 lg:px-8">
<!-- Inner card: kuning transparan dengan border, rounded-2xl -->
<div
style="background:rgba(254,180,1,0.08);border:1px solid rgba(254,180,1,0.2);border-radius:1rem;padding:2.5rem 2rem;">
groups/ACAAB/main.js
+29 -19
View File
@@ -181,7 +181,7 @@ document.addEventListener('DOMContentLoaded', async () => {
]);
if (achResult.status === 'fulfilled') {
achievements = achResult.value;
achievements = achResult.value.sort((a, b) => b.year - a.year);
} else {
console.error('[ACAAB] achievements error:', achResult.reason);
showError('acaab-ach-grid', t('grp_acaab_ach_error'));
@@ -359,9 +359,11 @@ function renderAchievements() {
if (moreBtn) moreBtn.style.display = achVisible < filtered.length ? 'inline-block' : 'none';
if (lessBtn) lessBtn.style.display = achVisible > ACH_INIT ? 'inline-block' : 'none';
grid.querySelectorAll('.acaab-ach-readmore').forEach(btn => {
btn.addEventListener('click', () => {
const ach = achievements.find(a => a.id === btn.dataset.id);
grid.querySelectorAll('.acaab-ach-card').forEach(card => {
card.addEventListener('click', (e) => {
// Biarkan tombol yang merupakan link tetap berfungsi
if (e.target.closest('a')) return;
const ach = achievements.find(a => a.id === card.dataset.id);
if (ach) openAchModal(ach);
});
});
@@ -369,7 +371,7 @@ function renderAchievements() {
function achCardHtml(a, idx) {
return `
<article class="acaab-ach-card acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
<article class="acaab-ach-card acaab-fade-in" data-id="${escHtml(a.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
<div class="acaab-ach-top-bar"></div>
<!-- Image h-56 (224px) -->
<div style="position:relative;height:224px;overflow:hidden;background:#f1f5f9;">
@@ -494,11 +496,11 @@ function openAchModal(a) {
</div>` : '';
renderModal(`
<!-- Image header h-56 -->
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;height:100%;object-fit:cover;"
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
<!-- Image header -->
<div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
<!-- Close button: white rounded-full -->
<button id="acaab-modal-close" aria-label="Tutup"
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
@@ -598,9 +600,17 @@ function renderProjects() {
track.innerHTML = visible.map((p, i) => projCardHtml(p, i)).join('');
if (moreBtn) moreBtn.style.display = projVisible < filtered.length ? 'inline-block' : 'none';
track.querySelectorAll('.acaab-proj-readmore').forEach(btn => {
btn.addEventListener('click', () => {
const proj = projects.find(p => p.id === btn.dataset.id);
// Responsif: Sembunyikan scroll button & center jika cuma 1 data
const prevBtn = document.getElementById('acaab-proj-prev');
const nextBtn = document.getElementById('acaab-proj-next');
if (prevBtn) prevBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
if (nextBtn) nextBtn.style.display = filtered.length <= 1 ? 'none' : 'flex';
track.style.justifyContent = filtered.length === 1 ? 'center' : 'flex-start';
track.querySelectorAll('.acaab-proj-card-wrap').forEach(card => {
card.addEventListener('click', (e) => {
if (e.target.closest('a') && e.target.closest('a').href) return;
const proj = projects.find(p => p.id === card.dataset.id);
if (proj) openProjModal(proj);
});
});
@@ -613,7 +623,7 @@ function projCardHtml(p, idx) {
</span>`).join('');
return `
<div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
<div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" data-id="${escHtml(p.id)}" style="animation-delay:${idx * 0.05}s;cursor:pointer;">
<div class="acaab-proj-left-bar"></div>
<!-- Image h-52 (208px) dengan title overlay -->
<div style="height:208px;overflow:hidden;position:relative;">
@@ -720,11 +730,11 @@ function openProjModal(p) {
</div>`;
renderModal(`
<!-- Image header h-56 -->
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
<!-- Image header -->
<div style="position:relative;border-radius:0.75rem 0.75rem 0 0;background:#0f172a;flex-shrink:0;">
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;max-height:450px;object-fit:contain;display:block;"
onerror="this.src='https://placehold.co/800x600/0f172a/FDB813?text=Informatika+UNTAN'">
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.1) 40%,transparent 100%);pointer-events:none;"></div>
<!-- Close button -->
<button id="acaab-modal-close" aria-label="Tutup"
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">