Merge pull request 'main' (#33) from tisto/student-web-if-development-kit:main into main

Reviewed-on: izu/student-web-if-development-kit#33
Approved (After UAT)

assets/global/localization.js

@@ -1233,8 +1233,8 @@ const translations = {
 		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_batch: "TOTAL ANGKATAN",
-		grp_m4n1fest_hero_stat_company: "PERUSAHAAN",
+		grp_m4n1fest_hero_stat_company: "TOTAL PERUSAHAAN",
 		grp_m4n1fest_eyebrow_achievers: "High Achievers",
 		grp_m4n1fest_title_achievers: "Alumni <em>Informatika</em>",
 		grp_m4n1fest_sub_achievers:
@@ -1286,7 +1286,7 @@ const translations = {
 		grp_m4n1fest_skill_not_listed: "Belum Terdata di Sini?",
 		grp_m4n1fest_skill_not_listed_desc:
 			"Bantu kami melengkapi database skill alumni Informatika UNTAN. Kontribusikan data keahlian Anda untuk memetakan potensi nyata dari lulusan di berbagai sektor industri.",
-		grp_m4n1fest_skill_btn_contrib: "Isi Form Kontribusi",
+		grp_m4n1fest_skill_btn_contrib: "Isi Form",
 		grp_m4n1fest_eyebrow_stats: "Statistik Alumni",
 		grp_m4n1fest_title_stats:
 			"Jumlah Alumni <em>berdasarkan Tahun Kelulusan</em>",
@@ -1295,6 +1295,11 @@ const translations = {
 		grp_m4n1fest_table_head_period: "Periode",
 		grp_m4n1fest_table_head_amount: "Jumlah",
 		grp_m4n1fest_table_source: "Sumber : BAK UNTAN",
+		grp_m4n1fest_table_p1: "2024 Genap",
+		grp_m4n1fest_table_p2: "2024 Ganjil",
+		grp_m4n1fest_table_p3: "2023 Genap",
+		grp_m4n1fest_table_p4: "2023 Ganjil",
+		grp_m4n1fest_table_p5: "2022 Genap",
 		grp_m4n1fest_chart_title: "Grafik Jumlah Lulusan",
 		grp_m4n1fest_eyebrow_testi: "Testimoni Alumni",
 		grp_m4n1fest_title_testi: "Kata Mereka tentang <em>Informatika UNTAN</em>",
@@ -1308,7 +1313,7 @@ const translations = {
 		grp_m4n1fest_testi3_text:
 			'"Fondasi yang kita peroleh dari kampus dan Himpunan merupakan wadah terbaik untuk belajar ketangguhan. Jadikanlah pengalaman tersebut sebagai sarana untuk terus terbuka terhadap perubahan. Jika kita mampu beradaptasi dengan baik, batas kemampuan kita tidak lagi ditentukan oleh geografi, melainkan seberapa jauh kita berani melangkah."',
 		grp_m4n1fest_testi3_role:
-			"Dosen Tetap, UMP & Peneliti, Universidad de Granada",
+			"Dosen Tetap, UMP & Peneliti, Universidad de Granada · Angkatan 2005",
 		grp_m4n1fest_eyebrow_events: "Kegiatan Tahunan",
 		grp_m4n1fest_title_events: "Temui Kami di <em>Setiap Tahun</em>",
 		grp_m4n1fest_sub_events:
@@ -1319,7 +1324,7 @@ const translations = {
 			"SKBI Ramadhan adalah acara silaturahmi yang mempertemukan seluruh keluarga besar Informatika UNTAN — mahasiswa aktif, dosen, dan alumni dari berbagai angkatan. Kegiatan ini menjadi momen silaturahmi yang hangat di bulan Ramadhan, mempererat tali persaudaraan alumni dengan civitas akademika melalui kegiatan sosial, buka bersama, dan networking.",
 		grp_m4n1fest_event1_note: "Info lengkap di Instagram HMIF",
 		grp_m4n1fest_event2_title: "INFORMERS",
-		grp_m4n1fest_event2_meta: "Informatic Anniversary",
+		grp_m4n1fest_event2_meta: "HUT Informatika",
 		grp_m4n1fest_event2_desc:
 			"INFORMERS adalah perayaan Hari Ulang Tahun Program Studi Informatika UNTAN. Acara besar ini mewadahi berbagai kegiatan kompetisi akademik maupun non-akademik tingkat mahasiswa, pameran inovasi IT, hiburan musik, hingga malam puncak yang mengumpulkan seluruh civitas akademika dan alumni dalam semangat dedikasi dan kebersamaan.",
 		grp_m4n1fest_event2_note: "Pantau IG untuk jadwal & cara daftar",
@@ -1355,9 +1360,11 @@ const translations = {
 		grp_m4n1fest_form_status_opt5: "Mencari Kerja",
 		grp_m4n1fest_form_instansi:
 			'Tempat Bekerja / Instansi <span class="text-xs text-slate-400 font-normal">(opsional)</span>',
+		grp_m4n1fest_form_instansi_placeholder: "Contoh: PT. Telkom Indonesia, Google...",
 		grp_m4n1fest_form_skill_title: "3 Skill Utama yang Dikuasai *",
 		grp_m4n1fest_form_skill_sub: "Pilih 3 skill yang paling kamu kuasai.",
 		grp_m4n1fest_form_skill_opt1: "— Pilih —",
+		grp_m4n1fest_form_skill_others: "Lainnya",
 		grp_m4n1fest_form_persetujuan: "Persetujuan *",
 		grp_m4n1fest_form_persetujuan_txt:
 			"Saya menyetujui bahwa data yang saya masukkan adalah benar and bersedia diverifikasi oleh admin IKA Informatika UNTAN.",
@@ -2548,8 +2555,8 @@ const translations = {
 		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_batch: "TOTAL BATCHES",
-		grp_m4n1fest_hero_stat_company: "COMPANIES",
+		grp_m4n1fest_hero_stat_company: "TOTAL COMPANIES",
 		grp_m4n1fest_eyebrow_achievers: "High Achievers",
 		grp_m4n1fest_title_achievers: "Informatics <em>Alumni</em>",
 		grp_m4n1fest_sub_achievers:
@@ -2603,7 +2610,7 @@ const translations = {
 		grp_m4n1fest_skill_not_listed: "Not Listed Here Yet?",
 		grp_m4n1fest_skill_not_listed_desc:
 			"Help us complete the skill database of Informatics UNTAN alumni. Contribute your expertise data to map the true potential of graduates across various industrial sectors.",
-		grp_m4n1fest_skill_btn_contrib: "Fill Out Contribution Form",
+		grp_m4n1fest_skill_btn_contrib: "Fill Form",
 		grp_m4n1fest_eyebrow_stats: "Alumni Statistics",
 		grp_m4n1fest_title_stats: "Number of Alumni <em>by Graduation Year</em>",
 		grp_m4n1fest_sub_stats:
@@ -2611,6 +2618,11 @@ const translations = {
 		grp_m4n1fest_table_head_period: "Period",
 		grp_m4n1fest_table_head_amount: "Amount",
 		grp_m4n1fest_table_source: "Source: BAK UNTAN",
+		grp_m4n1fest_table_p1: "2024 Even",
+		grp_m4n1fest_table_p2: "2024 Odd",
+		grp_m4n1fest_table_p3: "2023 Even",
+		grp_m4n1fest_table_p4: "2023 Odd",
+		grp_m4n1fest_table_p5: "2022 Even",
 		grp_m4n1fest_chart_title: "Graduation Chart",
 		grp_m4n1fest_eyebrow_testi: "Alumni Testimonials",
 		grp_m4n1fest_title_testi: "What They Say About <em>Informatics UNTAN</em>",
@@ -2624,7 +2636,7 @@ const translations = {
 		grp_m4n1fest_testi3_text:
 			'"The foundation we obtain from the campus and Student Association is the best place to learn resilience. Make that experience a means to stay open to changes. If we are able to adapt well, our limits are no longer determined by geography, but how far we dare to step."',
 		grp_m4n1fest_testi3_role:
-			"Full-time Lecturer, UMP & Researcher, Universidad de Granada",
+			"Full-time Lecturer, UMP & Researcher, Universidad de Granada · Class of 2005",
 		grp_m4n1fest_eyebrow_events: "Annual Events",
 		grp_m4n1fest_title_events: "Meet Us <em>Every Year</em>",
 		grp_m4n1fest_sub_events:
@@ -2671,9 +2683,11 @@ const translations = {
 		grp_m4n1fest_form_status_opt5: "Looking for a Job",
 		grp_m4n1fest_form_instansi:
 			'Workplace / Institution <span class="text-xs text-slate-400 font-normal">(optional)</span>',
+		grp_m4n1fest_form_instansi_placeholder: "Example: PT. Telkom Indonesia, Google...",
 		grp_m4n1fest_form_skill_title: "3 Primary Skills Mastered *",
 		grp_m4n1fest_form_skill_sub: "Select 3 skills you are most proficient in.",
 		grp_m4n1fest_form_skill_opt1: "— Select —",
+		grp_m4n1fest_form_skill_others: "Others",
 		grp_m4n1fest_form_persetujuan: "Consent *",
 		grp_m4n1fest_form_persetujuan_txt:
 			"I agree that the data I entered is true and willing to be verified by the Informatics UNTAN IKA admin.",

groups/M4N1FEST/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 <head>
     <meta charset="UTF-8">
@@ -1188,7 +1188,7 @@
 
         <div class="custom-stats">
           <div class="custom-stat-box">
-            <div class="custom-stat-num custom-serif">212<span class="custom-stat-plus">+</span></div>
+            <div class="custom-stat-num custom-serif">212</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>
@@ -1197,7 +1197,7 @@
             <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">202<span class="custom-stat-plus">+</span></div>
+            <div class="custom-stat-num custom-serif">170+</div>
             <div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div>
           </div>
         </div>
@@ -1445,7 +1445,7 @@
                       class="logo-initials"
                       style="background: #f3f4f6; color: #4b5563"
                     >
-                      202+
+                      160+
                     </div>
                     <span class="logo-name" style="color: #6b7280" data-i18n="grp_m4n1fest_logo_others">Lainnya</span>
                   </div>
@@ -1548,7 +1548,7 @@
                         <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                         <path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z" />
                       </svg>
-                      <span data-i18n="grp_m4n1fest_skill_btn_contrib">Isi Form Kontribusi</span>
+                      <span data-i18n="grp_m4n1fest_skill_btn_contrib">Isi Form</span>
                     </a>
                   </div>
                 </div>
@@ -1593,23 +1593,23 @@
                   </thead>
                   <tbody>
                     <tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
-                      <td style="padding: 14px 20px;">2024 Genap</td>
+                      <td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p1">2024 Genap</td>
                       <td style="padding: 14px 20px; text-align: right;">50</td>
                     </tr>
                     <tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
-                      <td style="padding: 14px 20px;">2024 Ganjil</td>
+                      <td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p2">2024 Ganjil</td>
                       <td style="padding: 14px 20px; text-align: right;">27</td>
                     </tr>
                     <tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
-                      <td style="padding: 14px 20px;">2023 Genap</td>
+                      <td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p3">2023 Genap</td>
                       <td style="padding: 14px 20px; text-align: right;">63</td>
                     </tr>
                     <tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
-                      <td style="padding: 14px 20px;">2023 Ganjil</td>
+                      <td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p4">2023 Ganjil</td>
                       <td style="padding: 14px 20px; text-align: right;">27</td>
                     </tr>
                     <tr style="background: #fff; border-bottom: 1px solid #e2e8f0;">
-                      <td style="padding: 14px 20px;">2022 Genap</td>
+                      <td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p5">2022 Genap</td>
                       <td style="padding: 14px 20px; text-align: right;">45</td>
                     </tr>
                   </tbody>
@@ -1719,7 +1719,7 @@
                     <div class="testi-meta">
                       <div class="testi-name">Izhan Fakhruzi</div>
                       <div class="testi-role" data-i18n="grp_m4n1fest_testi3_role">
-                        Dosen Tetap, UMP & Peneliti, Universidad de Granada
+                        Dosen Tetap, UMP & Peneliti, Universidad de Granada · Angkatan 2005
                       </div>
                     </div>
                   </div>
@@ -1831,7 +1831,7 @@
                         font-weight: 600;
                       "
                       data-i18n="grp_m4n1fest_event2_meta"
-                      >Informatic Anniversary</span
+                      >HUT Informatika</span
                     >
                   </div>
                   <p class="event-desc" data-i18n="grp_m4n1fest_event2_desc">
@@ -1990,7 +1990,7 @@
     <div class="form-row">
       <div class="form-group">
         <label class="form-label" data-i18n="grp_m4n1fest_form_nim">NIM</label>
-        <input type="text" id="ika-nim" class="form-input" placeholder="H1031..." />
+        <input type="text" id="ika-nim" class="form-input" placeholder="D1041..." />
       </div>
       <div class="form-group">
         <label class="form-label" data-i18n="grp_m4n1fest_form_angkatan">Angkatan *</label>
@@ -2002,7 +2002,7 @@
     <div class="form-row">
       <div class="form-group">
         <label class="form-label" data-i18n="grp_m4n1fest_form_hp">No. HP / WhatsApp *</label>
-        <input type="tel" id="ika-hp" class="form-input" placeholder="+62 812-xxxx-xxxx" />
+        <input type="tel" id="ika-hp" class="form-input" placeholder="0821xxxxx" />
       </div>
       <div class="form-group">
         <label class="form-label" data-i18n="grp_m4n1fest_form_email">Email Aktif *</label>
@@ -2026,7 +2026,7 @@
     <div class="form-group">
       <label class="form-label" data-i18n-html="grp_m4n1fest_form_instansi">Tempat Bekerja / Instansi
         <span class="form-note-optional">(opsional)</span></label>
-      <input type="text" id="ika-instansi" class="form-input" placeholder="Contoh: PT. Telkom Indonesia, Google..." />
+      <input type="text" id="ika-instansi" class="form-input" placeholder="Contoh: PT. Telkom Indonesia, Google..." data-i18n-placeholder="grp_m4n1fest_form_instansi_placeholder" />
     </div>
 
     <!-- 3 Skill -->
@@ -2047,7 +2047,7 @@
           <option>Cybersecurity</option>
           <option>Machine Learning / AI</option>
           <option>Database</option>
-          <option>Lainnya</option>
+          <option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
         </select>
       </div>
       <div class="form-group">
@@ -2062,7 +2062,7 @@
           <option>Cybersecurity</option>
           <option>Machine Learning / AI</option>
           <option>Database</option>
-          <option>Lainnya</option>
+          <option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
         </select>
       </div>
       <div class="form-group">
@@ -2077,7 +2077,7 @@
           <option>Cybersecurity</option>
           <option>Machine Learning / AI</option>
           <option>Database</option>
-          <option>Lainnya</option>
+          <option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
         </select>
       </div>
     </div>
@@ -2844,20 +2844,59 @@
         const spinnerElement = document.getElementById('skill-note-spinner');
         const noteTextElement = document.getElementById('skill-note-text');
 
-        // Menampilkan catatan status di bawah grafik keahlian
+        let alumniCount = 0;
-        function setSkillNote(text, shouldSpin, shouldShowCta) {
+        let isDataFetched = false;
+        let isFetchFailed = false;
+
+        // Menampilkan catatan status di bawah grafik keahlian dengan dukungan bilingual
+        function setSkillNote(shouldSpin) {
             if (spinnerElement) {
                 spinnerElement.style.animation = shouldSpin ? 'spin 1s linear infinite' : 'none';
+                if (!shouldSpin) {
+                    spinnerElement.style.display = 'none';
+                } else {
+                    spinnerElement.style.display = 'inline-block';
+                }
             }
             if (!noteTextElement) return;
 
-            if (shouldShowCta) {
+            const currentLang = typeof getLang === 'function' ? getLang() : 'id';
-                noteTextElement.innerHTML = `${text} <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
+            
+            if (!isDataFetched) {
+                if (isFetchFailed) {
+                    if (currentLang === 'en') {
+                        noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">fill form</a>`;
+                    } else {
+                        noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">isi form</a>`;
+                    }
+                } else {
+                    noteTextElement.textContent = currentLang === 'en' ? 'Loading alumni skill data...' : 'Memuat data skill alumni...';
+                }
             } else {
-                noteTextElement.textContent = text;
+                if (alumniCount === 0) {
+                    if (currentLang === 'en') {
+                        noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">fill form</a>`;
+                    } else {
+                        noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">isi form</a>`;
+                    }
+                } else {
+                    if (currentLang === 'en') {
+                        noteTextElement.textContent = `Data from ${alumniCount} verified alumni.`;
+                    } else {
+                        noteTextElement.textContent = `Data dari ${alumniCount} alumni yang diverifikasi.`;
+                    }
+                }
             }
         }
 
+        // Terapkan translasi teks saat memuat halaman
+        setSkillNote(true);
+
+        // Pasang event listener untuk menangani pergantian bahasa dinamis
+        document.addEventListener('languageChanged', () => {
+            setSkillNote(isDataFetched ? false : !isFetchFailed);
+        });
+
         // Menyaring dan mengelompokkan teks bebas ke kategori keahlian terstandar
         function normalizeSkill(rawSkillText) {
             if (!rawSkillText) return null;
@@ -2920,17 +2959,22 @@
             .then(responseText => {
                 const rows = parseGoogleSheetsJson(responseText);
 
+                isDataFetched = true;
                 if (rows.length === 0) {
-                    setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+                    alumniCount = 0;
+                    setSkillNote(false);
                     return;
                 }
 
+                alumniCount = rows.length;
                 const counts = calculateSkillCounts(rows);
                 updateSkillBarsUI(counts);
-                setSkillNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
+                setSkillNote(false);
             })
             .catch(() => {
-                setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+                isDataFetched = false;
+                isFetchFailed = true;
+                setSkillNote(false);
             });
     })();
 

groups/M4N1FEST/style.css

@@ -1198,6 +1198,12 @@ ul.achiever-achievements li::before {
   font-size: 0.74rem;
   color: var(--muted);
   margin-top: 1px;
+  min-height: 3.8em;
+}
+@media (max-width: 660px) {
+  .testi-role {
+    min-height: auto;
+  }
 }
 .stars {
   display: flex;