# FITGOAL Image Studio

Editor gambar berbasis browser untuk konten fitness, carousel, dan infografis. Paket ini sudah siap diunggah ke Cloudflare Pages. Tidak memerlukan build, API key, database, atau CDN.

## Unggah ke Cloudflare Pages

1. Unduh paket ZIP ini.
2. Buka dashboard Cloudflare, lalu **Workers & Pages**.
3. Pilih pembuatan aplikasi **Pages** dengan metode **Direct Upload / Drag and drop**.
4. Masukkan nama proyek, misalnya `fitgoal-studio`.
5. Unggah ZIP ini, atau ekstrak dan unggah seluruh folder yang berisi `index.html`.
6. Pilih **Deploy site**. Setelah selesai, buka alamat `*.pages.dev` yang diberikan Cloudflare.

Pastikan `index.html` berada langsung di akar unggahan, bukan tersembunyi di dalam folder bertingkat. Sertakan seluruh folder `assets`, `styles.css`, `renderer.js`, dan `app.js`.

Rujukan resmi: https://developers.cloudflare.com/pages/get-started/direct-upload/

Alternatif bagi pengguna Wrangler: ekstrak ZIP, lalu jalankan dari direktori yang memuat `index.html`:

```bash
npx wrangler pages deploy . --project-name fitgoal-studio
```

## Menjalankan di komputer sendiri

Ekstrak ZIP. Untuk memastikan font, foto, dan ekspor kanvas dapat dibaca dengan benar, jalankan melalui server lokal atau Cloudflare Pages. Jika Python tersedia, dari folder hasil ekstrak jalankan:

```bash
python3 -m http.server 8080
```

Kemudian buka `http://localhost:8080`. Membuka HTML langsung melalui `file://` bisa dibatasi oleh browser, terutama untuk font dan ekspor gambar.

## Membuat konten

1. Pilih slide dari daftar di bagian bawah. Tersedia empat contoh awal yang bisa diedit, termasuk template Ucapan / hari raya.
2. Pada tab **Konten**, pilih salah satu dari lima komposisi:
   - **Cover**: teks di bawah dan tombol CTA opsional.
   - **Konten bawah**: judul dan isi di bagian bawah seperti referensi pertama.
   - **Konten atas**: judul dan isi di bagian atas seperti referensi kedua.
   - **Infografis**: judul, isi, dan daftar poin dengan ikon atau angka.
   - **Ucapan / hari raya**: judul besar di kiri atas, highlight neon, foto penuh, logo kiri atas, tagline kanan atas, dan slogan di bawah ucapan; mengikuti komposisi referensi kedua.
3. Ketik judul dan isi. Tekan Enter untuk menentukan pergantian baris. Teks juga membungkus otomatis mengikuti lebar grup.
4. Seleksi kata pada kolom judul, lalu tekan **Highlight pilihan**. Bisa juga menggunakan tanda kurung siku ganda:

```text
TUJUANNYA
SEDERHANA
TAPI [[POWERFUL]]
```

Beberapa frasa dapat diwarnai sekaligus. Warna awal adalah kuning neon `#d7ff00`, dan dapat diganti.

## Panel kiri, canvas tengah, panel kanan

- **Kiri**: tab Konten dan Foto. Teks, template, gambar, dan pencahayaan.
- **Tengah**: canvas, pilihan ukuran, dan daftar slide.
- **Kanan**: tab Layout, Brand, dan Ekspor. Kedua panel memiliki tab dan scroll masing-masing sehingga konten tetap terlihat saat mengatur desain.
- Sakelar **Tampilkan tombol CTA** selalu terlihat di atas pengaturan kanan. Status berlaku per slide dan tetap tersimpan saat mengganti template.
- Pada layar tablet, canvas berada di atas dua panel. Pada ponsel, kedua panel ditumpuk di bawah canvas.

## Bold dan highlight pada teks isi

Seleksi kata atau kalimat di kolom **Isi**, lalu klik **Bold** atau **Highlight**. Klik tombol yang sama lagi pada seleksi tersebut untuk membatalkan formatnya. Bold dan highlight bisa digabung atau diterapkan pada beberapa bagian terpisah.

```text
Tetap **aktif** dan jaga [[semangatmu]].
Gabungkan **[[tebal dan kuning neon]]** dalam satu frasa.
```

- **Hapus format** menghapus semua bold dan highlight pada kolom Isi.
- Highlight menggunakan warna teks kuning neon sesuai gaya judul pada template.
- Preview, thumbnail, ekspor PNG, ekspor JPG, dan ZIP menggunakan format teks yang sama.
- Isi tetap memakai font Inter; bobot tebal dibuat oleh renderer browser dari Inter Regular yang disertakan.

## Template Ucapan / hari raya

Pilih template **Ucapan / hari raya**, atau buka contoh pada slide keempat.

- Pilih contoh **Ucapan selamat**, **Idul Fitri**, **Natal**, **Tahun Baru**, atau **Hari Kemerdekaan**, lalu klik **Gunakan contoh teks**. Tindakan ini mengganti judul dan isi slide aktif; bisa dibatalkan dengan Urungkan.
- Pergantian template sendiri tetap mempertahankan judul, isi, dan foto yang sudah ditulis.
- Edit **Tagline kanan atas** dan **Slogan di bawah ucapan** sesuai kebutuhan. Kosongkan kolomnya untuk menyembunyikan elemen tersebut.
- Judul, isi, dan slogan menjadi satu grup yang dapat digeser atau diubah skalanya. Tagline berada di sudut kanan atas.
- Ketentuan font, warna neon, garis aksen, logo, dan ekspor tetap sama dengan template lainnya.

## Font dan logo

- Judul memakai **GOTHAM-BLACK.OTF** dari lampiran Anda.
- Isi dan teks poin memakai **Inter-Regular.ttf** dari lampiran Anda.
- Kedua font disertakan secara lokal di folder `assets`.
- Logo bawaan adalah teks FITGOAL yang disusun dengan Gotham Black, warna putih/kuning neon, dan kemiringan yang mendekati referensi. Untuk memakai logo resmi persis, unggah PNG transparan melalui tab **Brand**.
- Foto contoh menggunakan **gambar pertama yang Anda kirim**, disertakan tanpa perubahan pada berkas sumber. Crop, gelap, dan fade diterapkan di canvas dan bisa diatur di tab Foto. Referensi kedua diterapkan sebagai susunan elemen yang dapat diedit, bukan gambar poster datar.

## Garis, posisi, dan ukuran

Judul, isi, garis, dan daftar poin menjadi satu grup konten.

- **Garis vertikal** dihitung dari bagian atas judul sampai bagian bawah isi.
- **Garis mendatar** berada tepat di tengah jarak vertikal antara bawah judul dan atas isi. Posisi horizontal mengikuti awal teks seperti referensi.
- Jika judul atau isi kosong, garis pemisah otomatis disembunyikan.
- Geser grup langsung di kanvas. Tarik kotak kecil di sudut kanan bawah seleksi untuk mengubah skala keseluruhan.
- Logo dan tombol CTA memiliki posisi dan skala sendiri.
- Tab **Layout** menyediakan posisi X/Y, skala, lebar grup, ukuran/jarak baris, jarak judul–isi, ketebalan garis, dan panjang garis mendatar.
- Saat kanvas aktif, gunakan tombol panah untuk menggeser 1 px. **Shift + panah** menggeser 10 px. Tombol **+ / −** mengubah skala.
- Tombol **Urungkan / Ulangi** juga tersedia. Pintasan: **Ctrl/⌘ Z** dan **Ctrl/⌘ Shift Z** saat tidak sedang mengetik.
- Jika elemen melewati tepi kanvas, aplikasi menampilkan pemberitahuan agar komposisi bisa diperbaiki sebelum ekspor.

## Foto dan fade

- Unggah JPG, PNG, atau WEBP melalui tab **Foto**, atau seret file foto ke kanvas. Maksimal 30 MB per file.
- Gunakan pilihan cepat penggelapan **0%, 10%, 15%, 20%**; slider tersedia untuk penyesuaian lebih lanjut.
- Fade hitam tersedia untuk **atas**, **bawah**, **atas + bawah**, atau **tanpa fade**. Kekuatan dan jangkauannya dapat diatur.
- Klik **Geser foto di kanvas** untuk mengatur crop. Foto tetap menutupi kanvas tanpa ruang kosong.
- Perbesar foto menggunakan slider zoom agar tersedia ruang untuk menggeser crop.
- Foto diunggah ke memori browser untuk pengolahan lokal; tidak dikirim ke server aplikasi.

## Infografis

Gunakan template Infografis untuk membuka pengaturan poin di tab Konten.

- Tersedia **50 pilihan ikon** yang berkaitan dengan latihan, aktivitas, nutrisi, dan pemulihan.
- Setiap poin dapat memilih ikon sendiri.
- Pilih **Angka neon** untuk mengganti ikon dengan urutan 01, 02, 03, dan seterusnya.
- Tambah, hapus, dan pindahkan poin ke atas. Maksimal 12 poin per slide; sesuaikan skala untuk menjaga keterbacaan.
- Ukuran teks, ukuran ikon/angka, jarak antarpoin, jarak dari isi, serta garis kecil di samping poin dapat diatur.

## Tombol footer

Pada **semua template**, gunakan sakelar di bagian atas panel kanan. Buka tab **Brand** untuk mengatur teks dan ukuran CTA:

- Aktifkan atau matikan **Tampilkan tombol CTA** dengan mouse atau tombol spasi saat sakelar fokus. Statusnya tersimpan per slide dan tidak direset saat template diganti.
- Pilih **Mulai sekarang!**, **Learn more!**, atau ketik teks manual.
- Bentuk tombol miring dengan panah mengikuti referensi.
- Geser dan ubah ukurannya di kanvas; tersedia tombol untuk mengembalikan posisi ke kanan bawah.

## Slide dan ekspor

- Tambahkan slide, duplikat, ubah urutan, atau hapus melalui daftar slide.
- Pilihan **Feed** menghasilkan **1080 × 1350 px (4:5)**.
- Pilihan **Vertikal** menghasilkan **1080 × 1920 px (9:16)** untuk Story / Reels. Pilih dari dropdown di atas canvas atau kartu format pada tab Layout.
- Ukuran kanvas berlaku untuk seluruh carousel. Periksa kembali komposisi setelah mengganti ukuran.
- Tab **Ekspor** menyediakan **PNG** atau **JPG**. Kualitas JPG dapat diatur 70–100%.
- Unduh slide aktif atau seluruh slide dalam satu file ZIP.
- Seleksi, kotak pengubah ukuran, dan antarmuka editor tidak ikut diekspor.
- **300 dpi** disimpan sebagai metadata PNG `pHYs` atau JPEG `JFIF`. Ukuran piksel tidak berubah. PNG menyimpan nilai setara sekitar 299,9994 dpi karena pembulatan piksel per meter; aplikasi gambar umumnya menampilkannya sebagai 300 dpi.
- Pengaturan dan foto belum disimpan permanen. Muat ulang atau menutup halaman akan menghapus sesi. Ekspor gambar sebelum meninggalkan halaman.

## Isi paket

- `index.html`: halaman utama.
- `styles.css`: tampilan responsif.
- `app.js`: pengaturan editor, slide, interaksi, dan ekspor.
- `renderer.js`: mesin gambar yang sama untuk pratinjau dan hasil ekspor.
- `assets/`: font, ikon, pustaka ZIP, foto contoh, dan lisensi dependensi.
- `PANDUAN.md`: panduan ini.
- `CREDITS.txt`: sumber aset.

## Pemeriksaan versi ini

Kelima template telah dirender pada Feed 1080 × 1350 dan Vertikal 1080 × 1920. Dimensi PNG/JPG dan metadata 300 dpi diperiksa dari hasil ekspor. Pengujian DOM lokal mencakup sakelar CTA pada semua template, pergantian template, undo/redo, panel yang bekerja terpisah, format vertikal, contoh ucapan, seleksi bold/highlight yang bertumpuk, sinkronisasi kontrol, serta ekspor PNG/JPG dan ZIP. Render contoh diperiksa secara visual. Pengujian visual antarmuka dan interaksi browser langsung belum dapat dilakukan karena lingkungan browser membatasi halaman lokal.