# 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

```bash
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 |

## Deploy Netlify

Project ini sudah punya konfigurasi Netlify di `netlify.toml`.

Saat membuat site di Netlify:
- Repository: `GuavaPopper/PPL_Staging`
- Branch deploy: `Staging`
- Build command: `npm run build`
- Publish directory: `dist`

## 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`:

```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`:

```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`:

```js
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)
