5 Commits

19 changed files with 51 additions and 91 deletions
+2
View File
@@ -578,6 +578,7 @@ const translations = {
grp_m4n1fest_hero_btn_stats: "Lihat Statistik Alumni",
grp_m4n1fest_hero_btn_join: "Gabung Grup IKA",
grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI",
grp_m4n1fest_hero_stat_alumni_desc: "data diperoleh dari alumni terdata di tracer study",
grp_m4n1fest_hero_stat_batch: "ANGKATAN",
grp_m4n1fest_hero_stat_company: "PERUSAHAAN",
grp_m4n1fest_eyebrow_achievers: "High Achievers",
@@ -1285,6 +1286,7 @@ const translations = {
grp_m4n1fest_hero_btn_stats: "View Alumni Statistics",
grp_m4n1fest_hero_btn_join: "Join Alumni Group",
grp_m4n1fest_hero_stat_alumni: "TOTAL ALUMNI",
grp_m4n1fest_hero_stat_alumni_desc: "data obtained from alumni recorded in tracer study",
grp_m4n1fest_hero_stat_batch: "CLASSES",
grp_m4n1fest_hero_stat_company: "COMPANIES",
grp_m4n1fest_eyebrow_achievers: "High Achievers",
Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

+38 -90
View File
@@ -1188,15 +1188,16 @@
<div class="custom-stats">
<div class="custom-stat-box">
<div class="custom-stat-num custom-serif">850<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-num custom-serif">212<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_alumni">TOTAL ALUMNI</div>
<div class="custom-stat-desc" style="font-size: 0.65rem; color: #a1a1aa; margin-top: 4px; line-height: 1.35; font-weight: normal; font-family: sans-serif;" data-i18n="grp_m4n1fest_hero_stat_alumni_desc">data diperoleh dari alumni terdata di tracer study</div>
</div>
<div class="custom-stat-box">
<div class="custom-stat-num custom-serif">18<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-num custom-serif">22</div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_batch">ANGKATAN</div>
</div>
<div class="custom-stat-box" style="border-right: none;">
<div class="custom-stat-num custom-serif">150<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-num custom-serif">202<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div>
</div>
</div>
@@ -1226,8 +1227,8 @@
<!-- Card 1 -->
<div class="achiever-card rv d1">
<div class="achiever-body">
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #1a3a6b, #2352a0);">
<span class="achiever-initials">IF</span>
<div class="achiever-avatar-circle">
<img src="./assets/izhan.jpg" alt="Izhan Fakhruzi">
</div>
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach1_batch">Angkatan 2005</div>
<div class="achiever-name">Izhan Fakhruzi</div>
@@ -1244,8 +1245,8 @@
<!-- Card 2 -->
<div class="achiever-card rv d2">
<div class="achiever-body">
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #0f766e, #14b8a6);">
<span class="achiever-initials">CD</span>
<div class="achiever-avatar-circle">
<img src="./assets/charles.jpg" alt="Charles Darwis Hariman">
</div>
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach2_batch">Informatika UNTAN</div>
<div class="achiever-name">Charles Darwis Hariman</div>
@@ -1262,8 +1263,8 @@
<!-- Card 3 -->
<div class="achiever-card rv d3">
<div class="achiever-body">
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #3730a3, #6366f1);">
<span class="achiever-initials">DP</span>
<div class="achiever-avatar-circle">
<img src="./assets/dona.jpg" alt="Dona Pramana Pura">
</div>
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach3_batch">Angkatan 2009</div>
<div class="achiever-name">Dona Pramana Pura</div>
@@ -1396,102 +1397,47 @@
</div>
<div class="logo-grid">
<div class="logo-card">
<div
class="logo-initials"
style="background: #ebf1fb; color: #1a3a6b"
>
BCA
</div>
<img src="./assets/BCA.png" alt="Logo BCA" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bca">BCA</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #fff0f0; color: #c00"
>
BRI
</div>
<img src="./assets/bri.png" alt="Logo BRI" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bri">BRI</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #fff7e6; color: #f5b800"
>
TLKM
</div>
<img src="./assets/Telkom.jpg" alt="Logo Telkom Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkom">Telkom Indonesia</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #ebf1fb; color: #0a66c2"
>
PLN
</div>
<img src="./assets/pln.jpg" alt="Logo PLN" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_pln">PLN</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #f0f0ff; color: #3730a3"
>
INDF
</div>
<img src="./assets/Indofood.png" alt="Logo Indofood Fortuna" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_indofood">Indofood Fortuna</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #fff0f5; color: #ee4d2d"
>
ASTR
</div>
<img src="./assets/astra.webp" alt="Logo Astra Daihatsu" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_astra">Astra Daihatsu</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #f0fff4; color: #15803d"
>
UNVR
</div>
<img src="./assets/unilever-logo.png" alt="Logo Unilever" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_unilever">Unilever</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #f0fff4; color: #16a34a"
>
GRAB
</div>
<img src="./assets/grab.png" alt="Logo Grab" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_grab">Grab</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #fff0f0; color: #c00"
>
TSEL
</div>
<img src="./assets/telkomsel.jpg" alt="Logo Telkomsel" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkomsel">Telkomsel</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #ebf1fb; color: #0866ff"
>
GIAA
</div>
<img src="./assets/garuda_indonesia.jpg" alt="Logo Garuda Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_garuda">Garuda Indonesia</span>
</div>
<div class="logo-card">
<div
class="logo-initials"
style="background: #fffbea; color: #b38500"
>
BULG
</div>
<img src="./assets/Bulog-Logo.png" alt="Logo Perum Bulog" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bulog">Perum BULOG</span>
</div>
<div class="logo-card">
@@ -1623,12 +1569,24 @@
</p>
</div>
<div class="two-col" style="align-items: flex-start;">
<!-- left: Table -->
<div class="two-col stat-cols" style="align-items: flex-start;">
<!-- left: Chart -->
<div class="chart-box rv d2" style="margin-top: 0;">
<div class="chart-header">
<div class="chart-title" data-i18n="grp_m4n1fest_chart_title">
Grafik Jumlah Lulusan
</div>
</div>
<div style="position: relative; height: 280px; width: 100%;">
<canvas id="kelulusanChart"></canvas>
</div>
</div>
<!-- right: Table -->
<div class="rv d1" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding: 0;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
<thead>
<tr style="background: #374151; color: #fff;">
<tr style="background: #1a3a6b; color: #fff;">
<th style="padding: 14px 20px; font-weight: 600;" data-i18n="grp_m4n1fest_table_head_period">Periode</th>
<th style="padding: 14px 20px; font-weight: 600; text-align: right;" data-i18n="grp_m4n1fest_table_head_amount">Jumlah</th>
</tr>
@@ -1660,18 +1618,6 @@
Sumber : BAK UNTAN
</div>
</div>
<!-- right: Chart -->
<div class="chart-box rv d2" style="margin-top: 0;">
<div class="chart-header">
<div class="chart-title" data-i18n="grp_m4n1fest_chart_title">
Grafik Jumlah Lulusan
</div>
</div>
<div style="position: relative; height: 280px; width: 100%;">
<canvas id="kelulusanChart"></canvas>
</div>
</div>
</div>
</div>
</section>
@@ -2701,6 +2647,8 @@
<!-- Scroll Reveal Observer & Chart.js Initialization -->
<script>
/* ── IKA FORM SUBMIT ── */
// Silakan ganti URL di bawah dengan Web App URL (akhiran /exec) hasil Deploy project Apps Script Anda.
// Cara Deploy: di Apps Script editor -> Deploy -> New deployment -> Web app -> Who has access: Anyone.
const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
// Checkbox visual toggle
+11 -1
View File
@@ -593,6 +593,12 @@ a {
justify-content: center;
border: 3px solid var(--navy-ghost);
margin-bottom: 12px;
overflow: hidden;
}
.achiever-avatar-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.achiever-card:hover .achiever-avatar-circle {
border-color: var(--gold-lt);
@@ -660,11 +666,15 @@ ul.achiever-achievements li::before {
gap: 52px;
align-items: start;
}
.stat-cols {
grid-template-columns: 1.3fr 0.7fr;
}
.two-col > * {
min-width: 0;
}
@media (max-width: 760px) {
.two-col {
.two-col,
.stat-cols {
grid-template-columns: 1fr;
gap: 32px;
}