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

fix layout mobile

Browse Source
This commit is contained in:
cw
2026-06-04 20:40:37 +07:00
parent 141eeeb629
commit dfc84bcbe9
3 changed files with 94 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/ACAAB/index.html
+70 -71
View File
@@ -1234,67 +1234,65 @@
<div
style="background:#feb401;border-radius:0.75rem;box-shadow:0 10px 30px -10px rgba(253,184,19,0.4);padding:1.25rem 1.5rem 1.5rem;">
<!-- Row 1: Dua chip header navy -->
<div style="display:flex;gap:0.75rem;margin-bottom:1.25rem;">
<!-- TOTAL PRESTASI chip — lebar 4x -->
<div
style="flex:4;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
<span
style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
<div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
<!-- Prestasi Block -->
<div style="flex:4;min-width:240px;">
<div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
<span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
</div>
<div style="display:flex;gap:0.25rem;">
<!-- Prestasi Mahasiswa (total) -->
<div style="flex:1;text-align:center;padding:0 0.15rem;">
<div id="stat-total-ach"
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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
Prestasi<br>Mahasiswa</div>
</div>
<!-- Internasional -->
<div style="flex:1;text-align:center;padding:0 0.15rem;">
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
data-i18n="grp_acaab_stats_intl">Internasional</div>
</div>
<!-- Nasional -->
<div style="flex:1;text-align:center;padding:0 0.15rem;">
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
data-i18n="grp_acaab_stats_national">Nasional</div>
</div>
<!-- Regional -->
<div style="flex:1;text-align:center;padding:0 0.15rem;">
<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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
data-i18n="grp_acaab_stats_regional">Regional</div>
</div>
</div>
</div>
<!-- TOTAL PORTOFOLIO chip — lebar 1x -->
<div
style="flex:1;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
<span
style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
</div>
</div>
<!-- Row 2: 5 angka sejajar (4 prestasi + 1 proyek) -->
<div style="display:flex;gap:0.25rem;">
<!-- Prestasi Mahasiswa (total) -->
<div style="flex:1;text-align:center;padding:0 0.25rem;">
<div id="stat-total-ach"
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: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 -->
<div style="flex:1;text-align:center;padding:0 0.25rem;">
<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: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 -->
<div style="flex:1;text-align:center;padding:0 0.25rem;">
<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: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 -->
<div style="flex:1;text-align:center;padding:0 0.25rem;">
<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: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) -->
<div style="flex:1;text-align:center;padding:0 0.25rem;">
<div id="stat-total-proj"
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: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>
<!-- Proyek Block -->
<div style="flex:1;min-width:120px;">
<div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
<span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
</div>
<div style="display:flex;justify-content:center;">
<!-- Proyek Mahasiswa (total) -->
<div style="text-align:center;padding:0 0.15rem;">
<div id="stat-total-proj"
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:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
Proyek<br>Mahasiswa</div>
</div>
</div>
</div>
</div>
@@ -1381,17 +1379,6 @@
<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>
<!-- Scroll control buttons (atas, kanan) -->
<div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;margin-top:0.25rem;">
<button id="acaab-proj-prev" aria-label="Geser kiri"
style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
<i class="fas fa-chevron-left" style="font-size:0.875rem;"></i>
</button>
<button id="acaab-proj-next" aria-label="Geser kanan"
style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
<i class="fas fa-chevron-right" style="font-size:0.875rem;"></i>
</button>
</div>
</div>
<!-- Filter panel -->
@@ -1433,6 +1420,18 @@
<div id="acaab-proj-track" class="acaab-carousel-track acaab-hide-scrollbar"
style="display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;"></div>
<!-- Scroll control buttons (bawah) -->
<div style="display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;">
<button id="acaab-proj-prev" aria-label="Geser kiri"
style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
<i class="fas fa-chevron-left" style="font-size:1rem;"></i>
</button>
<button id="acaab-proj-next" aria-label="Geser kanan"
style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
<i class="fas fa-chevron-right" style="font-size:1rem;"></i>
</button>
</div>
<!-- Load more -->
<div style="text-align:center;margin-top:1.5rem;">
<button id="acaab-proj-more"
@@ -1444,7 +1443,7 @@
<!-- ── CTA ────────────────────────────────────────────────────────────── -->
<section class="not-prose acaab-full-bleed bg-untan-navy"
style="padding:3.5rem 0; margin-bottom:-3rem;">
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