# Arsip Belajar — Edisi Elegan
Situs statis untuk mengumpulkan **link video pembelajaran** dan **buku PDF yang
bisa diunduh**. Versi ini menonjolkan tampilan yang **lembut, membulat, dan
berwarna** — memakai palet ala Bootstrap, tanpa hitam pekat dan tanpa sudut
tajam.
Tidak ada build step. Cukup HTML, CSS, dan satu berkas JavaScript.
> Ini adalah **versi 2 (elegan)**. Versi 1 bergaya editorial ada di folder
> `personal-site/` sebagai pembanding.
---
## Struktur berkas
```
personal-site-elegan/
├─ index.html Beranda (hero, statistik, sorotan video & buku, tentang, kontak)
├─ video.html Daftar lengkap video + pencarian & filter kategori
├─ buku.html Daftar lengkap buku + pencarian & filter kategori
├─ README.md Berkas ini
├─ PERENCANAAN.md Ringkasan rencana & keputusan desain
└─ assets/
├─ css/style.css Seluruh sistem desain (warna, tipografi, komponen)
├─ js/main.js Menu seluler, animasi, pencarian, filter, formulir
├─ img/ Foto placeholder (arsitektur, alam, meja kerja)
└─ buku/ Berkas PDF contoh yang benar-benar bisa diunduh
```
## Menjalankan secara lokal
Cara paling mudah: klik dua kali `index.html` (terbuka di peramban).
Beberapa fitur (mis. `download`) bekerja lebih andal lewat server lokal. Bila
sudah ada Python:
```bash
cd personal-site-elegan
python -m http.server 8778
```
Lalu buka .
---
## Cara menambah video
1. Buka `video.html` (dan, bila ingin tampil di beranda, `index.html`).
2. Salin satu blok `…` yang sudah ada.
3. Sesuaikan:
- `href` pada `` → tautan video aslinya.
- `data-cat` → kategori (harus sama dengan salah satu tombol filter).
- `data-title` dan `data-tags` → dipakai oleh pencarian.
- `data-tags` sebaiknya berisi kata kunci yang mungkin diketik pengunjung.
- `src` gambar, judul, kanal, dan durasi.
**Miniatur YouTube.** Bila video ada di YouTube, Anda bisa memakai miniatur
aslinya dengan mengganti `src` gambar menjadi:
```
https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg
```
Ganti `VIDEO_ID` dengan ID video (bagian setelah `watch?v=`). Contoh:
```html
```
Bila video bukan milik Anda, tetap arahkan tautannya ke sumber asli dan
cantumkan nama kanalnya. Jangan mengunggah ulang video orang lain.
## Cara menambah buku
1. Letakkan berkas PDF di `assets/buku/`.
2. Salin satu blok `…` di `buku.html`.
3. Sesuaikan judul, `data-cat`, `data-title`, `data-tags`, dan jumlah halaman.
4. Ubah **dua** atribut `href` (pada `.book-cover` dan pada tombol unduh) agar
menunjuk ke berkas PDF baru.
Warna sampul **tidak diatur per kartu** — ia mengikuti kategori lewat CSS
`[data-cat="…"] { --cat: … }`. Jadi cukup pastikan `data-cat` benar, dan sampul
otomatis memakai warna kategori tersebut.
> **Penting soal hak cipta.** Hanya tampilkan buku yang boleh dibagikan bebas
> (domain publik, lisensi terbuka seperti Creative Commons, atau seizin penulis).
> Berkas PDF di folder `assets/buku/` saat ini hanyalah **contoh** untuk demo.
## Mengubah identitas & kontak
- Nama merek: cari `Arsip Belajar` dan huruf logo `A` di ketiga berkas HTML.
- Email: ganti `halo@arsipbelajar.id`.
- Lokasi, tagline, dan teks "Tentang": ada di `index.html`.
- Alamat domain: perbarui `` dan tag `og:image`.
## Formulir
Formulir kontak dan langganan saat ini hanya **demo** (menampilkan pesan
terima kasih tanpa mengirim apa pun). Untuk membuatnya benar-benar mengirim,
sambungkan ke layanan seperti:
- **Netlify Forms** — tambahkan `netlify` pada tag `