izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Sync: Pull ulang kode legacy dari upstream student-web-if-development-kit

Browse Source
This commit is contained in:
Mhanif26
2026-06-04 09:24:50 +07:00
parent 7df1862dcc 0ebc25809b
commit 3516c5a3de
32 changed files with 24414 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -0,0 +1,3 @@
node_modules/
dist/
.DS_Store
README.md
+116
View File
@@ -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)
assets/global/footer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

assets/global/hero.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

assets/global/localization.js
+1233
View File
File diff suppressed because it is too large Load Diff
assets/global/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

assets/global/output.css
+5956
View File
File diff suppressed because it is too large Load Diff
groups/ACAAB/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/ACAAB/style.css
+48
View File
@@ -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/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/ApeNameTeamE/style.css
+48
View File
@@ -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/C4A/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/C4A/style.css
+47
View File
@@ -0,0 +1,47 @@
: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/HabisIniSeminar/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/HabisIniSeminar/style.css
+47
View File
@@ -0,0 +1,47 @@
: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/HarusSelesaiKP/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/HarusSelesaiKP/style.css
+47
View File
@@ -0,0 +1,47 @@
: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/Jellyfish.Corp/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/Jellyfish.Corp/style.css
+47
View File
@@ -0,0 +1,47 @@
: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/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/LimaEm/style.css
+48
View File
@@ -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/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/M4N1FEST/style.css
+47
View File
@@ -0,0 +1,47 @@
: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/RODA/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/RODA/style.css
+48
View File
@@ -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/index.html
+1338
View File
File diff suppressed because it is too large Load Diff
groups/Tapops/style.css
+48
View File
@@ -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
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Student Safe - Launcher</title>
<style>
body { font-family: Inter, Arial, sans-serif; margin: 0; background: #f8fafc; color: #0f172a; }
.wrap { width: min(900px, 92%); margin: 40px auto; }
.card { background: #fff; border: 1px solid #e2e8f0; padding: 20px; border-radius: 10px; }
h1 { margin: 0 0 10px; font-size: 1.8rem; }
p { color: #475569; }
ul { padding-left: 1rem; }
li { margin: .6rem 0; }
a { color: #0ea5e9; text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<main class="wrap">
<section class="card">
<h1>Web Student Safe</h1>
<p>Launcher untuk akses halaman tiap kelompok.</p>
<ul>
<li><a href="./groups/Jellyfish.Corp/index.html">Group 01 – Jellyfish.Corp</a></li>
<li><a href="./groups/HabisIniSeminar/index.html">Group 02 – HabisIniSeminar</a></li>
<li><a href="./groups/HarusSelesaiKP/index.html">Group 03 – HarusSelesaiKP</a></li>
<li><a href="./groups/C4A/index.html">Group 04 – C4A</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>
</body>
</html>
materi-git.html
+1093
View File
File diff suppressed because it is too large Load Diff
package-lock.json
Generated
+1105
View File
File diff suppressed because it is too large Load Diff
package.json
+14
View File
@@ -0,0 +1,14 @@
{
"name": "web-student-safe",
"version": "1.0.0",
"private": true,
"description": "Student-safe static page assignment kit for Informatika UNTAN",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^7.1.0"
}
}
panduan-tugas.html
+1000
View File
File diff suppressed because it is too large Load Diff