Panduan mencoba 14 layar SPE

Paket v1 • Gambar asli + area klik transparan • Tanpa backend atau panggilan AI

Tujuan paket: review tampilan dan navigasi, bukan aplikasi operasional. Ke-14 PNG disalin tanpa diubah atau dikompresi ulang. Tombol yang belum memiliki layar tujuan menjelaskan batas prototipe, bukan menjalankan transaksi.

1. Coba dahulu di komputer

Unduh ISTECH_SPE_14_Layar_Cloudflare_v1.zip.
Klik kanan ZIP → Extract All / Ekstrak Semua. Jangan menjalankan HTML langsung dari dalam ZIP.
Buka folder hasil ekstrak. Pastikan index.html, viewer.css, screens.js, viewer.js, dan folder assets berada bersama.
Klik kanan index.html → Open with → Google Chrome / Microsoft Edge. Tidak perlu instalasi atau server.
Halaman awal harus menampilkan 01 / 14 — Daftar SPE. Panduan ini juga dapat dibuka offline.

2. Upload ke Cloudflare Pages

Buka dashboard Cloudflare, masuk, lalu pilih akun Anda. Buat proyek baru khusus prototipe; jangan menimpa aplikasi LPP atau proyek lain.

Buka Workers & Pages, kemudian Create application.
Pilih jalur Pages → Get started → Drag and drop your files / Upload assets. Nama pilihan dapat berbeda; tujuannya harus Pages Direct Upload.
Gunakan nama proyek, misalnya istech-spe-review. Jika sudah digunakan, tambahkan angka atau nama singkat.
Unggah ZIP lengkap yang diberikan, atau seret folder hasil ekstraknya. Jangan hanya mengunggah index.html.
Periksa daftar unggahan: index.html harus di tingkat teratas dan folder assets berisi 14 PNG. Tidak perlu Git, build command, npm, database, atau API key.
Klik Deploy site / Save and Deploy. Tunggu sampai unggahan selesai tanpa kesalahan.
Buka alamat nama-proyek.pages.dev yang diberikan Cloudflare. Gunakan tautan tersebut untuk review.

Acuan langkah dan dukungan ZIP: Cloudflare Pages — Direct Upload. Semua file paket berukuran di bawah batas 25 MiB per file.

Jika diminta pembayaran: jangan lanjutkan checkout. Paket ini hanya membutuhkan hosting statis pada paket Free dan subdomain bawaan. Tidak perlu membeli domain atau mengaktifkan Workers AI, R2, D1, maupun layanan tambahan. Request aset statis tanpa Functions gratis menurut ketentuan Cloudflare.

3. Cara review tanpa mengubah visual

Kontrol	Cara menggunakan
Pilihan 01–14	Membuka semua gambar secara langsung.
Klik pada gambar	Tab, breadcrumb, Buka dan Kembali yang dipetakan menjalankan navigasi.
Tandai area klik	Hijau = navigasi; jingga = keterangan fitur/batas prototipe. Matikan untuk melihat gambar tanpa lapisan warna.
Ukuran asli 1:1	Menampilkan 1672 × 941 piksel CSS. Pada layar kecil, geser area gambar. Browser zoom 100% disarankan untuk perbandingan.
Mode pas layar (default)	Seluruh gambar ditampilkan proporsional tanpa dipotong. Ruang kosong di sisi gambar wajar jika rasio monitor berbeda.
Sembunyikan bar / H	Menyembunyikan bar review. Tekan H/Escape atau klik area gambar yang tidak aktif untuk memunculkannya kembali.
Panah kiri/kanan	Layar sebelumnya/berikutnya, jika fokus bukan pada select/checkbox.
Back/Forward browser	Kembali ke kunjungan layar sebelumnya. Tautan dengan `#layar-10` langsung membuka layar 10.

Gambar tetap sama; pengecilan oleh browser dapat memengaruhi ketajaman. Variasi logo, istilah, contoh customer, tanggal, atau susunan tab yang sudah ada di 14 gambar tetap dipertahankan. Paket ini tidak mengesahkan isi teknis atau mengoreksi SOP. Dialog keterangan merupakan bantuan review tambahan, bukan desain form final.

4. Daftar layar dan rute review

No.	Layar	Jalur masuk utama
01	Daftar SPE	Halaman awal; menu SPE
02	Detail SPE — Ringkasan	Klik nomor SPE-2026-184 di 01
03	Investigasi & Survei	Tab Investigasi & Survei di 02
04	BoQ Teknis	Tab BoQ Teknis di 02
05	Daftar Permintaan Gambar	Tab Permintaan Gambar di 02
06	Detail Permintaan Gambar	Buka permintaan pertama di 05
07	Daftar Pekerjaan Gambar	Tab Pekerjaan Gambar di 02
08	Detail Item Gambar — Ringkasan	Klik Panel MCC-01 di 07
09	Data Acuan	Tab Data Acuan di 08–14
10	Proses Gambar & Self-Check	Tab Proses Gambar di 08–14
11	Review Direktur & Sales	Lanjutkan Review di 07; Buka Pekerjaan pertama di 01
12	Approval Customer	Tab Approval Customer di 08–14
13	Koordinasi & Dokumen	Tab Koordinasi
14	Riwayat Revisi & Aktivitas	Tab Riwayat Revisi

Alur uji sederhana: 01 → klik nomor SPE → 02 → Permintaan Gambar → 05 → Buka permintaan pertama → 06 → Buka Pekerjaan Gambar → 08 → Data Acuan → 09 → Proses Gambar → 10 → Review Internal → 11 → Approval Customer → 12 → Koordinasi → 13 → Riwayat Revisi → 14 → Kembali ke Pekerjaan Gambar → 07.

5. Batas yang sengaja dipertahankan

Hanya 14 halaman asli. Tidak ada halaman WOI/SOW, panel lain, atau modal bisnis baru yang dikarang.
Self-check, radio approval, pencarian, filter, dan formulir di dalam gambar bukan kontrol data nyata.
Tidak mengirim email/WhatsApp, tidak mengunggah file ke server, tidak mengubah status, dan tidak menyimpan keputusan.
Tombol yang tampak belum aktif tidak menjalankan transisi pekerjaan. Dialog boleh menyediakan tautan lihat contoh untuk keperluan review.
PDF/DWG/Excel yang namanya terlihat di mockup tidak disertakan. Diagram bukan acuan engineering untuk produksi.
Tidak ada biaya/token AI saat klik prototipe karena tidak ada koneksi AI/API. Pembuatan atau revisi melalui percakapan tetap menggunakan kuota AI.

6. Keamanan dan pembaruan

Versi online ini tidak memiliki login. Siapa pun yang mendapatkan tautannya dapat mengakses gambar. Gunakan hanya data simulasi. Aturan noindex membantu menghindari pengindeksan, tetapi bukan proteksi akses. Jika gambar mengandung informasi rahasia, gunakan versi offline atau siapkan pembatasan akses sebelum publikasi.

Untuk pembaruan, buka proyek Pages yang sama → Create a new deployment → unggah paket versi baru. Jangan menghapus proyek lama atau mengunggah ke proyek operasional. Direct Upload tidak dapat diubah menjadi integrasi Git pada proyek yang sama; versi aplikasi HTML/React berikutnya dapat memakai proyek terpisah.

7. Jika tampilan belum sesuai

Gejala	Periksa
404 / halaman tidak ditemukan	Pastikan `index.html` di akar unggahan, bukan di dalam folder tambahan. Unggah ZIP yang diberikan tanpa membungkusnya lagi.
Gambar hilang	Folder `assets` dan seluruh 14 PNG harus ikut; jangan mengganti nama file. Tunggu upload selesai.
HTML lama yang berbeda masih tampil	Pastikan membuka proyek baru dan ZIP bernama 14_Layar_Cloudflare_v1, bukan Prototype_Interaktif_Module_SPE_Istech.html lama. Tekan Ctrl+F5.
Menu tidak dapat diklik	Aktifkan JavaScript dan Tandai area klik. Jingga memberi penjelasan; hijau berpindah layar. Gunakan pemilih 01–14 untuk layar yang tidak memiliki tab pada PNG tertentu.
Gambar terlalu kecil	Aktifkan Ukuran asli 1:1 atau fullscreen browser F11; sembunyikan bar dengan H.
Diminta Git/build/Worker	Kembali dan pilih Pages Direct Upload. Paket ini tidak memerlukan Worker atau konfigurasi build.
Diminta upgrade berbayar	Jangan menyetujui pembayaran. Periksa pilihan produk/plan; gunakan paket Free untuk prototipe statis.

Saat memberi koreksi, gunakan format: Nomor layar → bagian yang diklik → hasil yang muncul → hasil yang diinginkan. Sertakan screenshot jika posisi area klik perlu dikoreksi.