Feat: Push awal seluruh kode proyek ke repo student-web-if-development-kit

- Jelaskan cara kerja toggle bahasa (auto-detect, localStorage)
- Tambah langkah-langkah agar konten kelompok ikut bilingual (data-i18n + localization.js)
- Sertakan contoh key dengan prefix unik per kelompok

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -0,0 +1,116 @@
+# 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 |
+
+## 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)

groups/ACAAB/style.css

@@ -0,0 +1,48 @@
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }
+

groups/ApeNameTeamE/style.css

@@ -0,0 +1,48 @@
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }
+

groups/LimaEm/style.css

@@ -0,0 +1,48 @@
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }
+

groups/M4N1FEST/style.css

@@ -17,8 +17,10 @@ html {
   scroll-behavior: smooth;
   font-size: 16px;
 }
-body {
+body, h1, h2, h3, h4, h5, .brand {
   font-family: "Roboto", Arial, sans-serif;
+}
+body {
   background: #fff;
   color: #111827;
   -webkit-font-smoothing: antialiased;
@@ -29,7 +31,6 @@ h2,
 h3,
 h4,
 h5 {
-  font-family: "Roboto", Arial, sans-serif;
   line-height: 1.15;
 }
 img {
@@ -443,7 +444,9 @@ a {
 }
 
 /* section headings */
-.sec-h2 {
+.sec-h2,
+#assignment-body .sec-h2 {
+  font-family: "Playfair Display", serif;
   font-size: clamp(1.6rem, 2.8vw, 2.3rem);
   letter-spacing: -0.4px;
   margin-top: 10px;
@@ -453,10 +456,12 @@ a {
   font-style: italic;
   color: var(--navy-mid);
 }
-.sec-h2-w {
+.sec-h2-w,
+#assignment-body .sec-h2-w {
   color: #fff;
 }
-.sec-h2-w em {
+.sec-h2-w em,
+#assignment-body .sec-h2-w em {
   color: var(--gold-lt);
 }
 .sec-sub {

groups/RODA/style.css

@@ -0,0 +1,48 @@
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }
+

groups/Tapops/style.css

@@ -0,0 +1,48 @@
+:root {
+    --brand-navy: #003150;
+    --brand-yellow: #feb401;
+    --text-main: #1e293b;
+    --text-soft: #64748b;
+    --bg-soft: #f8fafc;
+    --line: #e2e8f0;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
+.container { width: min(1100px, 92%); margin-inline: auto; }
+
+.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
+.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
+
+.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
+.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
+.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
+.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
+.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
+
+.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
+@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
+
+.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
+.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
+.cover img { width: 100%; height: auto; display: block; }
+
+.article-body > * + * { margin-top: 1.1em; }
+.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
+.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
+.article-body p { margin: 0 0 1em; }
+.article-body ul, .article-body ol { padding-left: 1.4rem; }
+.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
+.article-body a { color: #005eb8; }
+.article-body img { max-width: 100%; border-radius: 8px; }
+.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
+.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
+
+.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
+.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
+.footer-logo { height: 28px; width: auto; }
+.footer-ornament { width: 100%; display: block; opacity: .9; }
+

index.html

@@ -22,11 +22,16 @@
       <h1>Web Student Safe</h1>
       <p>Launcher untuk akses halaman tiap kelompok.</p>
       <ul>
-        <li><a href="./groups/group-01/index.html">Group 01</a></li>
+        <li><a href="./groups/Jellyfish.Corp/index.html">Group 01 – Jellyfish.Corp</a></li>
-        <li><a href="./groups/group-02/index.html">Group 02</a></li>
+        <li><a href="./groups/HabisIniSeminar/index.html">Group 02 – HabisIniSeminar</a></li>
-        <li><a href="./groups/group-03/index.html">Group 03</a></li>
+        <li><a href="./groups/HarusSelesaiKP/index.html">Group 03 – HarusSelesaiKP</a></li>
-        <li><a href="./groups/group-04/index.html">Group 04</a></li>
+        <li><a href="./groups/C4A/index.html">Group 04 – C4A</a></li>
-        <li><a href="./groups/M4N1FEST/index.html">M4N1FEST</a></li>
+        <li><a href="./groups/M4N1FEST/index.html">Group 05 – M4N1FEST</a></li>
+        <li><a href="./groups/ACAAB/index.html">Group 06 – ACAAB</a></li>
+        <li><a href="./groups/LimaEm/index.html">Group 07 – LIMA EM</a></li>
+        <li><a href="./groups/RODA/index.html">Group 08 – RODA</a></li>
+        <li><a href="./groups/Tapops/index.html">Group 09 – TAPOPS</a></li>
+        <li><a href="./groups/ApeNameTeamE/index.html">Group 10 – Ape Name Tim E</a></li>
       </ul>
     </section>
   </main>

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

@@ -1,49 +0,0 @@
-# Student-Safe Package (NPM Ready)
-
-Paket ini dibuat agar mahasiswa **tidak menerima source code penuh web utama**.
-
-## Jalankan project
-
-```bash
-npm install
-npm run dev
-```
-
-Buka URL dari Vite (default: `http://localhost:5173`) lalu akses launcher di `/`.
-
-## Script NPM
-
-- `npm run dev` → jalankan local dev server
-- `npm run build` → build static output ke folder `dist`
-- `npm run preview` → preview hasil build
-
-## Struktur
-
-- `index.html` → launcher link group
-- `assets/global/`
-  - `hero.webp`
-  - `footer.png`
-  - `logo.png`
-- `groups/group-01/{index.html, style.css}`
-- `groups/group-02/{index.html, style.css}`
-- `groups/group-03/{index.html, style.css}`
-- `groups/group-04/{index.html, style.css}`
-- `groups/group-05/{index.html, style.css}`
-
-## Aturan
-
-1. Tiap kelompok hanya mengedit foldernya sendiri.
-2. Area konten yang boleh diubah hanya:
-
-```html
-<div id="assignment-body"> ... </div>
-```
-
-3. Jangan ubah path global asset (`../../assets/global/...`).
-4. Tidak ada JS global project.
-
-## Output Pengumpulan
-
-Setiap kelompok submit perubahan di:
-- `groups/group-xx/index.html`
-- `groups/group-xx/style.css` (jika perlu styling tambahan)

student-web-if-development-kit/groups/C4A/index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group 04 - Tugas Halaman Statis</title>
-    <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-    <header class="nav">
-        <div class="container">
-            <div class="brand">Informatika UNTAN — Static Assignment</div>
-        </div>
-    </header>
-
-    <section class="hero">
-        <img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
-        <div class="container hero-inner">
-            <span class="badge">Halaman Statis</span>
-            <h1>Judul Halaman Group 04</h1>
-        </div>
-    </section>
-
-    <main class="container layout">
-        <article>
-            <div class="meta">
-                <span>Kelompok 04</span>
-                <span>2026</span>
-            </div>
-
-            <figure class="cover">
-                <img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
-            </figure>
-
-            <div id="assignment-body" class="article-body">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
-        </article>
-
-        <aside>
-            <div class="note">
-                <h3>Catatan Tugas</h3>
-                <p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
-            </div>
-        </aside>
-    </main>
-
-    <footer class="footer">
-        <div class="container footer-inner">
-            <img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
-            <p>© Informatika UNTAN — Group 04</p>
-        </div>
-        <img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
-    </footer>
-</body>
-</html>

student-web-if-development-kit/groups/HabisIniSeminar/index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group 02 - Tugas Halaman Statis</title>
-    <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-    <header class="nav">
-        <div class="container">
-            <div class="brand">Informatika UNTAN — Static Assignment</div>
-        </div>
-    </header>
-
-    <section class="hero">
-        <img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
-        <div class="container hero-inner">
-            <span class="badge">Halaman Statis</span>
-            <h1>Judul Halaman Group 02</h1>
-        </div>
-    </section>
-
-    <main class="container layout">
-        <article>
-            <div class="meta">
-                <span>Kelompok 02</span>
-                <span>2026</span>
-            </div>
-
-            <figure class="cover">
-                <img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
-            </figure>
-
-            <div id="assignment-body" class="article-body">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
-        </article>
-
-        <aside>
-            <div class="note">
-                <h3>Catatan Tugas</h3>
-                <p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
-            </div>
-        </aside>
-    </main>
-
-    <footer class="footer">
-        <div class="container footer-inner">
-            <img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
-            <p>© Informatika UNTAN — Group 02</p>
-        </div>
-        <img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
-    </footer>
-</body>
-</html>

student-web-if-development-kit/groups/HarusSelesaiKP/index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group 03 - Tugas Halaman Statis</title>
-    <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-    <header class="nav">
-        <div class="container">
-            <div class="brand">Informatika UNTAN — Static Assignment</div>
-        </div>
-    </header>
-
-    <section class="hero">
-        <img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
-        <div class="container hero-inner">
-            <span class="badge">Halaman Statis</span>
-            <h1>Judul Halaman Group 03</h1>
-        </div>
-    </section>
-
-    <main class="container layout">
-        <article>
-            <div class="meta">
-                <span>Kelompok 03</span>
-                <span>2026</span>
-            </div>
-
-            <figure class="cover">
-                <img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
-            </figure>
-
-            <div id="assignment-body" class="article-body">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
-        </article>
-
-        <aside>
-            <div class="note">
-                <h3>Catatan Tugas</h3>
-                <p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
-            </div>
-        </aside>
-    </main>
-
-    <footer class="footer">
-        <div class="container footer-inner">
-            <img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
-            <p>© Informatika UNTAN — Group 03</p>
-        </div>
-        <img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
-    </footer>
-</body>
-</html>

student-web-if-development-kit/groups/Jellyfish.Corp/index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group 01 - Tugas Halaman Statis</title>
-    <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-    <header class="nav">
-        <div class="container">
-            <div class="brand">Informatika UNTAN — Static Assignment</div>
-        </div>
-    </header>
-
-    <section class="hero">
-        <img class="hero-bg" src="../../assets/global/hero.webp" alt="Hero">
-        <div class="container hero-inner">
-            <span class="badge">Halaman Statis</span>
-            <h1>Judul Halaman Group 01</h1>
-        </div>
-    </section>
-
-    <main class="container layout">
-        <article>
-            <div class="meta">
-                <span>Kelompok 01</span>
-                <span>2026</span>
-            </div>
-
-            <figure class="cover">
-                <img src="https://placehold.co/1200x675/e2e8f0/94a3b8?text=Header+Image" alt="Header halaman">
-            </figure>
-
-            <div id="assignment-body" class="article-body">
-                <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
-                <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-            </div>
-        </article>
-
-        <aside>
-            <div class="note">
-                <h3>Catatan Tugas</h3>
-                <p>Ubah hanya area <code>#assignment-body</code>. Jangan ubah shell layout.</p>
-            </div>
-        </aside>
-    </main>
-
-    <footer class="footer">
-        <div class="container footer-inner">
-            <img src="../../assets/global/logo.png" alt="Logo" class="footer-logo">
-            <p>© Informatika UNTAN — Group 01</p>
-        </div>
-        <img src="../../assets/global/footer.png" alt="Footer ornament" class="footer-ornament">
-    </footer>
-</body>
-</html>