student-web-if-development-kit/README.md

Student Web IF — Development Kit

Paket tugas halaman statis untuk mahasiswa Informatika UNTAN. Navbar dan footer identik dengan web resmi prodi (informatika.untan.ac.id).

Jalankan project

npm install
npm run dev

Buka URL dari Vite (default: http://localhost:5173) lalu akses launcher di /.

Script NPM

Perintah	Fungsi
npm run dev	Jalankan local dev server
npm run build	Build static output ke folder dist
npm run preview	Preview hasil build

Struktur Folder

student-web-if-development-kit/
├── index.html                  ← Launcher (daftar link semua grup)
├── assets/
│   └── global/
│       ├── output.css          ← Tailwind CSS (compiled dari web prod)
│       ├── localization.js     ← Toggle bahasa ID/EN
│       ├── hero.webp
│       ├── footer.png
│       └── logo.png
└── groups/
    ├── Jellyfish.Corp/         ← Group 01
    ├── HabisIniSeminar/        ← Group 02
    ├── HarusSelesaiKP/         ← Group 03
    ├── C4A/                    ← Group 04
    ├── M4N1FEST/               ← Group 05
    ├── ACAAB/                  ← Group 06 — Sorotan dan Prestasi Karya Mahasiswa
    ├── LimaEm/                 ← Group 07 — Kehidupan Mahasiswa & Himpunan (HMIF)
    ├── RODA/                   ← Group 08 — Riset & Kelompok Bidang Keahlian (KBK)
    ├── Tapops/                 ← Group 09 — Berkas Penting
    └── ApeNameTeamE/           ← Group 10 — Beasiswa

Setiap folder grup berisi:

• index.html → halaman tugas (navbar + footer sudah tersedia)
• style.css → CSS tambahan milik kelompok (opsional)

Aturan Pengerjaan

1. Tiap kelompok hanya mengedit foldernya sendiri.
2. Area konten yang boleh diubah hanya bagian ini di dalam index.html:

<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
...konten kalian di sini...
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->

3. Jangan ubah navbar, footer, dan path asset global (../../assets/global/...).
4. Boleh menambah <style> atau mengedit style.css untuk styling konten.
5. node_modules tidak perlu di-commit — jalankan npm install untuk generate ulang.

Catatan Teknis

• Navbar dan footer menggunakan Tailwind CSS dari assets/global/output.css (tidak perlu install Tailwind per grup).
• Mega menu dan mobile menu sudah aktif via inline script di tiap halaman.

Fitur Bilingual (ID / EN)

Setiap halaman grup mendukung toggle bahasa Indonesia ↔ English di pojok kanan atas navbar.

Cara kerja

• Bahasa default mengikuti pengaturan browser (navigator.language).
• Pilihan bahasa disimpan di localStorage, sehingga tetap aktif saat pindah halaman atau refresh.
• Klik ID untuk Bahasa Indonesia, klik EN untuk English.
• Elemen navbar dan footer akan otomatis berganti teks.

Cara menambahkan terjemahan pada konten kelompok

Jika kelompok ingin konten di #assignment-body ikut berganti bahasa, gunakan atribut data-i18n dan daftarkan terjemahannya di localization.js.

Langkah 1 — Tambahkan atribut data-i18n pada elemen HTML di index.html:

<h2 data-i18n="grp_acaab_title">Sorotan Prestasi Mahasiswa</h2>
<p data-i18n="grp_acaab_desc">Halaman ini menampilkan prestasi mahasiswa Informatika UNTAN.</p>

Langkah 2 — Daftarkan key tersebut di assets/global/localization.js pada bagian id dan en:

const translations = {
    id: {
        // ...key lainnya...
        grp_acaab_title: "Sorotan Prestasi Mahasiswa",
        grp_acaab_desc:  "Halaman ini menampilkan prestasi mahasiswa Informatika UNTAN.",
    },
    en: {
        // ...key lainnya...
        grp_acaab_title: "Student Achievement Highlights",
        grp_acaab_desc:  "This page showcases the achievements of Informatika UNTAN students.",
    }
};

Catatan: Gunakan prefix unik per kelompok pada nama key (contoh: grp_acaab_, grp_roda_) agar tidak bentrok dengan key kelompok lain.

Output Pengumpulan

Setiap kelompok submit perubahan pada:

• groups/<nama-folder>/index.html
• groups/<nama-folder>/style.css (jika ada)