System Requirements Document for nonton-iklan

1. Introduction

nonton-iklan adalah aplikasi nonton (aplikasi streaming tontonan) yang dibangun untuk satu tujuan bisnis yang eksplisit: orang lain menonton iklan di dalam aplikasi, dan pemilik aplikasi mendapatkan uang dari iklan yang ditonton tersebut.

Produk ini melayani dua audiens manusia:

• Penonton (Viewer) — orang lain yang datang untuk menonton tayangan yang tersedia. Mereka menonton konten, dan selama alur pemutaran berjalan, iklan ditayangkan kepada mereka.
• Pemilik Aplikasi (Owner) — pemilik yang menyediakan tontonan, mengelola konten, dan memantau pendapatan iklan yang dihasilkan dari penonton lain.

Nilai inti produk adalah pertukaran langsung: perhatian penonton masuk, uang keluar untuk pemilik. Seluruh permukaan produk dirancang agar pertukaran itu terlihat, terasa, dan terukur — bukan disembunyikan di balik dashboard korporat.

2. System Overview

nonton-iklan adalah aplikasi web dengan antarmuka kustom milik aplikasi sendiri. Penonton dapat menjelajahi dan memutar tontonan; iklan ditayangkan di dalam alur pemutaran; pemilik mengelola konten tontonan dan melihat pendapatan yang dihasilkan.

Aktor saat ini:

Cakupan saat ini: aplikasi nonton, penayangan iklan di dalam alur tontonan, pengelolaan konten oleh pemilik, dan pemantauan pendapatan pemilik.

Pengecualian sempit: tidak ada permukaan atau kemampuan yang ditambahkan di luar alur tontonan, pengelolaan konten, dan pemantauan pendapatan. Tidak ada fitur sosial, tidak ada rekomendasi, tidak ada kategori produk streaming lain yang tidak diminta.

2a. Product Interpretation and Delivery Boundary

Kepemilikan pengiriman. Seluruh permukaan produk ini adalah halaman kustom milik aplikasi (first-party). Tidak ada permukaan yang dialihkan ke penyedia eksternal atau diserahkan sebagai headless delivery. Aplikasi memiliki antarmuka, status, dan alur kerjanya sendiri.

Kepemilikan akses. Aplikasi memiliki identitas sendiri. Penonton dapat mengakses Landing, Browse, dan Watch tanpa identitas — menonton adalah tindakan anonim yang disengaja, karena nilai produk justru berasal dari orang lain yang menonton. Pemilik Aplikasi memerlukan identitas aplikasi untuk mengakses Content dan Revenue, karena kedua permukaan itu mengikat state tahan lama yang harus tetap terikat pada pemilik yang benar: konten yang disediakan dan pendapatan yang dihasilkan. Identitas pemilik dibangun melalui self-service enrollment (Sign Up) dan diverifikasi kembali melalui Login.

Batas saat ini dan masa depan. Semua perilaku yang dijelaskan dalam dokumen ini adalah cakupan saat ini. Tidak ada horizon masa depan yang dinyatakan dalam sumber; tidak ada bagian future requirements yang dibuat.

2b. Source Content Inventory

Tidak ada content_source yang dinyatakan dalam directive referensi mana pun. Bagian ini sengaja dihilangkan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: penjelasan aplikasi nonton dan manfaatnya; headline besar "NONTON / IKLAN"; baris "KAMU NONTON. AKU DIBAYAR."; ticker rupiah berjalan; foto duotone ponsel di tangan; tag oranye "BAYARAN MASUK"; band hazard-stripe di bawah hero.
• Aksi utama: masuk ke Browse untuk mulai memilih tontonan; masuk ke Sign Up atau Login untuk pemilik yang ingin mengelola.
• Aksi pendukung: membaca penjelasan manfaat; melihat ticker pendapatan berjalan.
• Entitas domain: tontonan (judul, durasi), iklan, pendapatan (rupiah).
• Tanggung jawab komponen: hero split off-centre (7 kolom kiri teks, 5 kolom kanan foto); headline dua kata dengan kata kedua outline-only; CTA persegi bergaris dengan blok oranye offset, dipin di kiri bawah; ticker marquee; band hazard-stripe full-bleed.
• State: loading — kerangka hero dan ticker placeholder; empty — tidak berlaku (halaman statis dengan konten tetap); success — hero, ticker, dan CTA tampil utuh; error — jika ticker gagal memuat data, ticker menampilkan baris statis tanpa angka; recovery — pengguna tetap dapat menekan CTA ke Browse.

Browse

• Informasi/state: daftar tontonan yang tersedia sebagai baris drop full-width; setiap baris berisi thumbnail, judul dalam tanda kutip, durasi, dan tag play; baris bergantian #0B0B0B dan #161616.
• Aksi utama: memilih tontonan untuk diputar.
• Aksi pendukung: menggulir daftar; melihat label-tag stamp di sudut baris.
• Entitas domain: tontonan (judul, durasi, thumbnail), iklan yang menyertai tontonan.
• Tanggung jawab komponen: baris drop full-width; hover membalik latar ke oranye solid dengan teks hitam dan menggeser tag tanda kutip dari kiri; label-tag stamp berotasi di sudut.
• State: loading — baris kerangka dengan grid terekspos; empty — pesan bahwa belum ada tontonan tersedia, dengan arahan kembali ke Landing; success — daftar baris drop tampil; error — pesan gagal memuat daftar dengan aksi coba lagi; recovery — coba lagi memuat ulang daftar tanpa kehilangan posisi gulir.

Watch

• Informasi/state: player dalam frame hitam; strip countdown iklan di atas player; label tape iklan "quoted" melintang di sudut kiri atas; nomor countdown berubah per detik tanpa easing.
• Aksi utama: memutar tontonan; menonton iklan yang disertakan dalam alur pemutaran.
• Aksi pendukung: menjeda/melanjutkan pemutaran; kembali ke Browse setelah selesai.
• Entitas domain: tontonan, iklan, tayangan iklan (impresi), pendapatan yang dihasilkan per tayangan.
• Tanggung jawab komponen: player; strip countdown hazard-stripe; label tape iklan; kontrol pemutaran.
• State: loading — frame hitam dengan indikator memuat; empty — tidak berlaku (Watch selalu dibuka dengan tontonan terpilih); success — tontonan dan iklan diputar sampai selesai, tayangan tercatat; error — pesan gagal memuat tontonan dengan aksi coba lagi; recovery — coba lagi memuat ulang tontonan dari awal atau melanjutkan dari posisi terakhir.

Sign Up

• Informasi/state: formulir pendaftaran pemilik; penjelasan bahwa akun diperlukan untuk mengelola konten dan memantau pendapatan.
• Aksi utama: mengirim pendaftaran untuk membuat identitas pemilik.
• Aksi pendukung: berpindah ke Login jika sudah punya akun.
• Entitas domain: identitas pemilik (kredensial, kepemilikan aplikasi).
• Tanggung jawab komponen: formulir; tombol submit persegi dengan outline putih dan blok oranye offset; tautan ke Login.
• State: loading — tombol submit dalam keadaan mengirim; empty — formulir kosong; success — pendaftaran diterima dan pemilik diarahkan ke Content; error — pesan kesalahan validasi atau kegagalan pendaftaran dengan aksi coba lagi; recovery — data formulir dipertahankan agar pemilik dapat memperbaiki dan mengirim ulang.

Login

• Informasi/state: formulir verifikasi kembali pemilik.
• Aksi utama: memverifikasi identitas untuk melanjutkan akses ke Content dan Revenue.
• Aksi pendukung: berpindah ke Sign Up jika belum punya akun.
• Entitas domain: identitas pemilik.
• Tanggung jawab komponen: formulir; tombol submit; tautan ke Sign Up.
• State: loading — tombol submit dalam keadaan memverifikasi; empty — formulir kosong; success — verifikasi berhasil dan pemilik diarahkan ke Content; error — pesan kredensial tidak valid dengan aksi coba lagi; recovery — pemilik dapat memperbaiki input dan mengirim ulang tanpa kehilangan konteks.

Content

• Informasi/state: daftar tontonan yang dikelola pemilik; status tiap tontonan; akses dibatasi untuk pemilik yang terverifikasi.
• Aksi utama: menambah tontonan; mengubah tontonan; menghapus tontonan.
• Aksi pendukung: melihat daftar tontonan yang tersedia di aplikasi.
• Entitas domain: tontonan (judul, durasi, thumbnail, status ketersediaan).
• Tanggung jawab komponen: daftar/editor tontonan; kontrol tambah/ubah/hapus; label-tag stamp; grid terekspos.
• State: loading — daftar kerangka; empty — pesan belum ada tontonan dengan aksi menambah tontonan pertama; success — daftar tontonan tampil dan perubahan tersimpan; error — pesan gagal menyimpan atau gagal memuat dengan aksi coba lagi; recovery — perubahan yang gagal dapat dikirim ulang tanpa kehilangan input.

Revenue

• Informasi/state: pendapatan yang dihasilkan dari iklan yang ditonton; baris ticker-tape; satu numeral tabular oversized per metrik; akses dibatasi untuk pemilik yang terverifikasi.
• Aksi utama: melihat pendapatan yang dihasilkan.
• Aksi pendukung: membaca ticker berjalan berisi "Rp … · IKLAN DITONTON · … TAYANGAN".
• Entitas domain: pendapatan (rupiah), tayangan iklan, jumlah tayangan.
• Tanggung jawab komponen: baris ticker-tape; numeral oversized; marquee acid yellow di atas hitam.
• State: loading — kerangka numeral dan ticker; empty — pesan belum ada pendapatan dengan penjelasan bahwa pendapatan muncul setelah iklan ditonton; success — numeral dan ticker menampilkan pendapatan terkini; error — pesan gagal memuat pendapatan dengan aksi coba lagi; recovery — coba lagi memuat ulang tanpa kehilangan tampilan terakhir.

3. Functional Requirements

FR-01 — Aplikasi nonton yang dapat digunakan orang lain untuk menonton

As a Penonton (Viewer), I should dapat membuka aplikasi nonton dan memutar tontonan yang tersedia, so that saya dapat menonton tayangan di dalam aplikasi.

• Provenance: explicit
• Aktor: Penonton (Viewer)
• Trigger/input: Penonton membuka aplikasi dan memilih tontonan.
• Hasil yang dapat diamati: tontonan diputar di dalam aplikasi.
• Access state: tidak memerlukan identitas (akses anonim).
• Failure/recovery: jika tontonan gagal dimuat, Penonton dapat mencoba lagi.
• Continuation: setelah selesai, Penonton dapat memilih tontonan lain.
• Owner: Browse, Watch

FR-02 — Penonton lain menonton iklan di dalam aplikasi

As a Penonton (Viewer), I should melihat iklan ditayangkan di dalam alur pemutaran tontonan, so that penayangan iklan terjadi saat saya menonton.

• Provenance: explicit
• Aktor: Penonton (Viewer)
• Trigger/input: Penonton memutar tontonan.
• Hasil yang dapat diamati: iklan ditayangkan dalam alur pemutaran, dengan strip countdown dan label tape iklan.
• Access state: tidak memerlukan identitas (akses anonim).
• Failure/recovery: jika iklan gagal dimuat, alur pemutaran memberi tahu Penonton dan dapat dilanjutkan.
• Continuation: setelah iklan selesai, pemutaran tontonan berlanjut.
• Owner: Watch

FR-03 — Pemilik aplikasi menerima uang dari iklan yang ditonton

As a Pemilik Aplikasi (Owner), I should menerima uang dari iklan yang ditonton oleh penonton lain, so that saya mendapatkan pendapatan dari aplikasi.

• Provenance: explicit
• Aktor: Pemilik Aplikasi (Owner); partisipan yang berkontribusi: Penonton (Viewer) yang menonton iklan.
• Trigger/input: Penonton menonton iklan di dalam alur pemutaran.
• Hasil yang dapat diamati: pendapatan tercatat dan dapat dilihat pemilik di Revenue.
• Access state: Revenue dibatasi untuk pemilik yang terverifikasi.
• Failure/recovery: jika pencatatan tayangan gagal, tayangan tersebut tidak dihitung; pemilik dapat melihat state terkini di Revenue.
• Continuation: pendapatan bertambah seiring tayangan berikutnya.
• Owner: Revenue (observable result), Watch (sumber tayangan)

FR-04 — Self-service enrollment pemilik

As a Pemilik Aplikasi (Owner), I should menyelesaikan pendaftaran mandiri sebelum mengelola konten atau memantau pendapatan, so that saya memiliki identitas yang mengikat konten dan pendapatan saya.

• Provenance: required_inference
• Aktor: Pemilik Aplikasi (Owner)
• Trigger/input: Pemilik membuka Sign Up dan mengirim formulir pendaftaran.
• Hasil yang dapat diamati: identitas pemilik terbentuk dan pemilik diarahkan ke Content.
• Access state: Sign Up dapat diakses tanpa identitas; Content dan Revenue tetap tidak tersedia sampai identitas terbentuk.
• Failure/recovery: jika pendaftaran gagal, pemilik dapat memperbaiki input dan mengirim ulang.
• Continuation: pemilik melanjutkan ke Content.
• Owner: Sign Up

FR-05 — Returning verification pemilik

As a Pemilik Aplikasi (Owner), I should melalui verifikasi kembali untuk melanjutkan akses ke Content dan Revenue, so that state tahan lama saya tetap terikat pada saya.

• Provenance: required_inference
• Aktor: Pemilik Aplikasi (Owner)
• Trigger/input: Pemilik membuka Login dan mengirim kredensial.
• Hasil yang dapat diamati: verifikasi berhasil dan pemilik diarahkan ke Content.
• Access state: Login dapat diakses tanpa identitas; Content dan Revenue tetap tidak tersedia sampai verifikasi berhasil.
• Failure/recovery: jika kredensial tidak valid, pemilik dapat memperbaiki input dan mengirim ulang.
• Continuation: pemilik melanjutkan ke Content atau Revenue.
• Owner: Login

FR-06 — Otorisasi pemilik atas Content dan Revenue

As a Pemilik Aplikasi (Owner), I should diotorisasi sebagai pemilik aplikasi untuk mengakses Content dan Revenue, so that hanya pemilik yang dapat mengelola konten dan melihat pendapatan.

• Provenance: required_inference
• Aktor: Pemilik Aplikasi (Owner)
• Trigger/input: Pemilik mencoba membuka Content atau Revenue.
• Hasil yang dapat diamati: akses diberikan hanya setelah identitas pemilik terverifikasi; akses tanpa identitas dialihkan ke Login.
• Access state: Content dan Revenue dibatasi untuk pemilik terverifikasi.
• Failure/recovery: jika akses ditolak, pemilik diarahkan ke Login untuk verifikasi.
• Continuation: setelah terverifikasi, pemilik dapat mengelola konten dan melihat pendapatan.
• Owner: Content, Revenue

FR-07 — Pengelolaan konten tontonan oleh pemilik

As a Pemilik Aplikasi (Owner), I should mengelola konten tontonan yang tersedia di aplikasi, so that penonton lain memiliki tayangan untuk ditonton.

• Provenance: required_inference
• Aktor: Pemilik Aplikasi (Owner)
• Trigger/input: Pemilik menambah, mengubah, atau menghapus tontonan di Content.
• Hasil yang dapat diamati: daftar tontonan yang tersedia di aplikasi berubah sesuai tindakan pemilik.
• Access state: Content dibatasi untuk pemilik terverifikasi.
• Failure/recovery: jika penyimpanan gagal, perubahan dapat dikirim ulang tanpa kehilangan input.
• Continuation: pemilik dapat melanjutkan mengelola tontonan lain.
• Owner: Content

FR-08 — Pemantauan pendapatan iklan oleh pemilik

As a Pemilik Aplikasi (Owner), I should melihat pendapatan yang dihasilkan dari iklan yang ditonton, so that saya tahu berapa uang yang masuk.

• Provenance: required_inference
• Aktor: Pemilik Aplikasi (Owner)
• Trigger/input: Pemilik membuka Revenue.
• Hasil yang dapat diamati: numeral oversized dan ticker menampilkan pendapatan terkini beserta jumlah tayangan.
• Access state: Revenue dibatasi untuk pemilik terverifikasi.
• Failure/recovery: jika pemuatan gagal, pemilik dapat mencoba lagi.
• Continuation: pemilik dapat kembali memantau kapan saja.
• Owner: Revenue

4. User Personas

Penonton (Viewer)

Konteks produk. Penonton adalah orang lain yang datang ke nonton-iklan untuk menonton tayangan yang tersedia. Mereka tidak memiliki akun dan tidak perlu memiliki akun — menonton adalah tindakan anonim yang disengaja. Mereka berinteraksi dengan aplikasi terutama di perangkat mobile, dengan perhatian yang singkat dan ekspektasi bahwa tontonan langsung bisa diputar.

Tujuan utama. Memutar dan menonton konten yang tersedia tanpa hambatan, sehingga penayangan iklan terjadi sebagai bagian dari pengalaman menonton.

Tanggung jawab yang diterima. Menjelajahi daftar tontonan yang tersedia; memilih tontonan; memutar tontonan; menonton iklan yang disertakan dalam alur pemutaran; kembali memilih tontonan lain setelah selesai.

Input dan keputusan. Penonton memutuskan tontonan mana yang akan diputar berdasarkan judul, durasi, dan thumbnail yang tampil di Browse. Mereka tidak mengelola konten dan tidak melihat pendapatan.

Interaksi dengan partisipan lain. Penonton adalah sumber tayangan iklan yang menghasilkan pendapatan bagi Pemilik Aplikasi. Setiap kali Penonton menonton iklan, nilai mengalir ke pemilik. Penonton tidak berinteraksi langsung dengan pemilik, tetapi tindakan mereka adalah masukan langsung bagi pendapatan pemilik.

Keberhasilan yang dapat diamati. Penonton berhasil memutar dan menonton konten sampai selesai, dengan iklan ditayangkan di dalam alur pemutaran.

Yang membedakan peran ini. Penonton adalah satu-satunya aktor yang menghasilkan nilai tanpa menerima uang — mereka menerima tontonan, bukan pendapatan. Seluruh pengalaman mereka dirancang agar menonton terasa mudah dan langsung, karena setiap hambatan mengurangi tayangan iklan.

Pemilik Aplikasi (Owner)

Konteks produk. Pemilik adalah orang yang membangun dan memiliki aplikasi nonton-iklan, dengan tujuan eksplisit mendapatkan uang dari iklan yang ditonton orang lain. Mereka adalah satu-satunya aktor yang memiliki identitas aplikasi, karena konten yang mereka sediakan dan pendapatan yang mereka hasilkan harus tetap terikat pada mereka.

Tujuan utama. Mendapatkan pendapatan iklan dari penonton lain, dengan menyediakan tontonan yang cukup agar orang mau menonton.

Tanggung jawab yang diterima. Menyelesaikan pendaftaran mandiri; melalui verifikasi kembali saat kembali; mengelola konten tontonan yang tersedia di aplikasi; memantau pendapatan iklan yang dihasilkan.

Input dan keputusan. Pemilik memutuskan tontonan apa yang disediakan, kapan menambah atau menghapusnya, dan memantau apakah pendapatan bergerak. Keputusan mereka tentang konten secara langsung menentukan apa yang bisa ditonton Penonton.

Interaksi dengan partisipan lain. Pemilik bergantung sepenuhnya pada Penonton: tanpa penonton lain yang menonton iklan, tidak ada pendapatan. Pemilik menyediakan konten yang menarik penonton, dan penonton menghasilkan pendapatan bagi pemilik.

Keberhasilan yang dapat diamati. Pendapatan iklan masuk dari penonton lain dan terlihat bertambah di Revenue.

Yang membedakan peran ini. Pemilik adalah satu-satunya aktor dengan state tahan lama dan satu-satunya aktor yang menerima uang. Pekerjaan mereka bersifat berulang: menyediakan konten, memantau pendapatan, dan menyesuaikan konten berdasarkan apa yang ditonton.

5. Core User Flows

Flow A — Penonton menemukan dan menonton tontonan (beserta iklan)

1. Konteks awal: Penonton (Viewer) membuka aplikasi nonton-iklan di perangkat mobile tanpa identitas apa pun.
2. Landing: Penonton melihat hero "NONTON / IKLAN" dengan baris "KAMU NONTON. AKU DIBAYAR.", ticker rupiah berjalan, dan CTA persegi bergaris dengan blok oranye offset di kiri bawah. Penonton memahami bahwa aplikasi ini adalah tempat menonton.
3. Masuk ke Browse: Penonton menekan CTA dan masuk ke Browse.
4. Memilih tontonan: Penonton melihat daftar baris drop full-width, masing-masing dengan thumbnail, judul dalam tanda kutip, durasi, dan tag play. Penonton menggulir dan memilih satu tontonan. Saat hover/sentuh, baris berubah menjadi oranye solid dengan teks hitam dan tag tanda kutip bergeser dari kiri.
5. Watch — pemutaran dimulai: Penonton masuk ke Watch. Player tampil dalam frame hitam, dengan strip countdown iklan di atasnya dan label tape iklan "quoted" melintang di sudut kiri atas.
6. Iklan ditayangkan: Iklan diputar dalam alur pemutaran. Nomor countdown berubah per detik tanpa easing. Penonton menonton iklan sampai selesai.
7. Hasil yang dapat diamati: Tayangan iklan tercatat, dan pemutaran tontonan berlanjut.
8. Kegagalan dan pemulihan: Jika tontonan atau iklan gagal dimuat, Penonton melihat pesan kesalahan dengan aksi coba lagi. Coba lagi memuat ulang tontonan dari awal atau melanjutkan dari posisi terakhir.
9. Langkah berikutnya: Setelah tontonan selesai, Penonton kembali ke Browse dan dapat memilih tontonan lain, memulai siklus tayangan berikutnya.

Flow B — Pemilik mendaftar dan mulai mengelola konten

1. Konteks awal: Pemilik Aplikasi (Owner) membuka aplikasi dan ingin mulai mengelola konten serta memantau pendapatan.
2. Landing: Pemilik melihat Landing dan memilih jalur pemilik menuju Sign Up.
3. Sign Up: Pemilik mengisi formulir pendaftaran dan mengirimnya. Tombol submit persegi dengan outline putih dan blok oranye offset.
4. Hasil yang dapat diamati: Identitas pemilik terbentuk. Pemilik diarahkan ke Content.
5. Kegagalan dan pemulihan: Jika pendaftaran gagal atau validasi gagal, data formulir dipertahankan dan pemilik dapat memperbaiki serta mengirim ulang.
6. Content — menambah tontonan: Pemilik melihat daftar tontonan yang dikelola. Jika belum ada tontonan, Content menampilkan pesan kosong dengan aksi menambah tontonan pertama. Pemilik menambah tontonan (judul, durasi, thumbnail, status ketersediaan).
7. Hasil yang dapat diamati: Tontonan yang ditambahkan muncul di daftar dan tersedia bagi Penonton di Browse.
8. Kegagalan dan pemulihan: Jika penyimpanan gagal, pemilik dapat mengirim ulang tanpa kehilangan input.
9. Langkah berikutnya: Pemilik melanjutkan mengelola tontonan lain atau berpindah ke Revenue.

Flow C — Pemilik kembali dan memverifikasi akses

1. Konteks awal: Pemilik Aplikasi (Owner) kembali ke aplikasi setelah sebelumnya mendaftar, dan ingin melanjutkan akses ke Content dan Revenue.
2. Login: Pemilik membuka Login dan mengirim kredensial.
3. Hasil yang dapat diamati: Verifikasi berhasil dan pemilik diarahkan ke Content.
4. Kegagalan dan pemulihan: Jika kredensial tidak valid, pemilik melihat pesan kesalahan, dapat memperbaiki input, dan mengirim ulang tanpa kehilangan konteks.
5. Langkah berikutnya: Pemilik melanjutkan ke Content atau Revenue.

Flow D — Pemilik memantau pendapatan iklan

1. Konteks awal: Pemilik Aplikasi (Owner) sudah terverifikasi dan ingin tahu berapa uang yang masuk.
2. Revenue: Pemilik membuka Revenue. Halaman menampilkan numeral oversized per metrik dan ticker berjalan berisi "Rp … · IKLAN DITONTON · … TAYANGAN" dalam acid yellow di atas hitam.
3. Hasil yang dapat diamati: Pendapatan terkini dan jumlah tayangan terlihat.
4. Kegagalan dan pemulihan: Jika pemuatan gagal, pemilik dapat mencoba lagi tanpa kehilangan tampilan terakhir. Jika belum ada pendapatan, Revenue menampilkan pesan kosong yang menjelaskan bahwa pendapatan muncul setelah iklan ditonton.
5. Langkah berikutnya: Pemilik dapat kembali ke Content untuk menyesuaikan tontonan berdasarkan apa yang ditonton, atau kembali memantau Revenue kapan saja.

Flow E — Akses tanpa identitas ke Content atau Revenue

1. Konteks awal: Seseorang mencoba membuka Content atau Revenue tanpa identitas pemilik yang terverifikasi.
2. Hasil yang dapat diamati: Akses ditolak dan diarahkan ke Login.
3. Langkah berikutnya: Setelah verifikasi berhasil, akses ke Content dan Revenue diberikan.

6. Visuals Colors and Theme

Muse: Virgil Abloh. Headline: Remixed familiarity for a watch-to-earn ad app.

Produk ini secara harfiah adalah pertukaran: perhatian masuk, uang keluar. Bahasa Virgil Abloh — label yang dikutip, tape industri, grid terekspos, dan keakraban yang di-remix — mengubah transaksi itu menjadi konsep visual. Setiap iklan adalah sesuatu yang "dikutip", setiap rupiah adalah label yang ditandai, setiap kartu adalah drop.

Palet (dark mode)

Tidak ada biru di mana pun. Tidak ada indigo. Template SaaS biru-putih generik dilarang untuk proyek ini.

Tipografi

• Headings: Archivo Black, all-caps, berat, tracking ketat -0.02em, dibungkus tanda kutip literal untuk judul seksi ("TONTONAN", "IKLAN", "PENDAPATAN").
• Body: Space Grotesk, 15–17px, normal case, line-height 1.6.
• Label dan angka: Space Grotesk uppercase 11–12px dengan letter-spacing 0.18em, seperti tag industri.
• Skala 1.5 modular: 140 / 96 / 64 / 40 / 28 / 18 / 16 / 13. Display mobile 64px, tablet 96px, desktop 140px via clamp().
• Font yang dilarang: Inter, Roboto, Poppins, Montserrat, system-ui untuk headings atau body.

Bahasa bentuk

• Sudut keras, radius 0 pada kartu dan tombol.
• Band hazard-stripe (repeating 45deg oranye/hitam) sebagai pembatas seksi dan progress bar.
• Motif label/tag: persegi kecil dengan lubang punch, berotasi −2deg sampai +2deg, ditempel di sudut kartu.
• Garis grid 1px #2A2A2A terekspos di belakang konten, dengan occasional rule oranye 4px.
• Tombol adalah persegi flat dengan outline putih 1px dan blok bayangan oranye offset 4px.

Tata letak

• Framing industrial: grid 1px persisten terlihat pada 1280px, konten terkunci ke 12 kolom dengan gutter 24px, dan strip hazard-stripe full-bleed di bawah nav.
• Browse adalah daftar baris drop vertikal, bukan grid kartu — setiap baris adalah bar full-width dengan thumbnail, judul dalam tanda kutip, durasi, dan tag play, bergantian #0B0B0B dan #161616.
• Watch menempatkan player dalam frame hitam dengan strip countdown iklan di atasnya dan label tape iklan "quoted" melintang di sudut kiri atas.
• Revenue menggunakan baris ticker-tape dan numeral oversized.

Imagery

Produk di atas beton: thumbnail iklan dan poster konten diperlakukan sebagai monokrom kontras tinggi dengan satu band duotone oranye, overlay grain. Tekstur industrial — beton, tepi ber-tape, strip barcode, sudut gaffer-tape. Tidak ada stok foto orang tersenyum, tidak ada gradient blob, tidak ada render 3D. Di mana seseorang muncul, itu adalah foto jalanan kontras tinggi yang di-crop, dengan wajah sebagian terpotong oleh label tape.

7. Signature Design Concept

Hero Landing: "NONTON / IKLAN" sebagai transaksi yang terlihat.

Hero Landing adalah split off-centre, bukan tumpukan terpusat.

• Kiri 7 kolom: "NONTON" dalam Archivo Black 140px desktop / 64px mobile, ditumpuk di atas "IKLAN" dalam teks outline-only. Di bawahnya, baris "KAMU NONTON. AKU DIBAYAR." dalam quoted caps berwarna acid yellow.
• Kanan 5 kolom: foto hitam-putih full-bleed dari ponsel yang dipegang tangan, di-crop keras di tepi kanan viewport, dilapisi tag oranye berotasi bertuliskan "BAYARAN MASUK" dan strip ticker rupiah berjalan melintasi bagian bawah gambar.
• Band hazard-stripe berjalan full viewport width tepat di bawah hero, memotong komposisi seperti construction tape.
• CTA utama adalah persegi outlined flat dengan blok oranye offset, dipin di kiri bawah di bawah headline — tidak pernah di tengah.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima: headline, penjelasan manfaat, ticker pendapatan, dan CTA ke Browse. Tidak ada perilaku, halaman, atau tujuan baru yang diperkenalkan.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: headline "NONTON / IKLAN" dan foto duotone ponsel di tangan, dengan tag "BAYARAN MASUK" dan ticker rupiah.
• Input → transformation → outcome: Saat halaman dimuat, headline masuk dengan potongan mekanis (bukan fade lembut), ticker rupiah mulai berjalan melintasi bagian bawah foto, dan tag "BAYARAN MASUK" bergeser masuk dari kiri. Hasilnya adalah komposisi yang terasa seperti mesin yang baru dinyalakan — transaksi siap berjalan.
• Motion vocabulary: Snappy dan mekanis. Transisi 120–180ms linear/ease-out, tanpa bounce. Marquee ticker 30s loop. Hover membalik latar baris ke oranye dengan teks hitam secara instan dan menggeser tag tanda kutip dari kiri. Countdown iklan menggunakan perubahan angka per detik yang keras, tanpa easing.
• Composed first frame: Headline "NONTON" solid dan "IKLAN" outline sudah terbaca penuh; foto duotone sudah ter-crop di tepi kanan; tag "BAYARAN MASUK" sudah di posisinya; ticker rupiah sudah menampilkan item pertama yang terbaca penuh; band hazard-stripe sudah memotong komposisi di bawah hero; CTA sudah terlihat di kiri bawah.
• Reduced-motion state: Dengan prefers-reduced-motion, ticker berhenti dan menjadi baris statis yang wrap; semua transisi menjadi instan; headline, foto, tag, dan CTA tetap tampil utuh dan terbaca.

9. Non-Functional Requirements

• NFR-01 — Aksesibilitas keterbacaan. Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, dengan wrapping atau scaling (clamp() dengan ukuran mobile-nya). Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Provenance: explicit (creative direction).
• NFR-02 — Gerakan yang dapat dikurangi. Dengan prefers-reduced-motion, ticker berhenti dan menjadi baris statis yang wrap, dan semua transisi menjadi instan. Provenance: explicit (creative direction).
• NFR-03 — Kontras teks. Body text #F4F4F2 pada #0B0B0B dan #161616 pada 15–16px untuk kontras yang memadai. Provenance: explicit (creative direction).
• NFR-04 — Batas warna aksi. #FF4D00 adalah satu-satunya warna aksi. #F2FF00 digunakan secara hemat sebagai tape, teks ticker, dan garis bawah highlight — tidak pernah sebagai fill besar di belakang body copy atau sebagai fill tombol. Provenance: explicit (creative direction).
• NFR-05 — Larangan template generik. Template SaaS indigo/biru-putih generik dilarang untuk proyek ini. Tidak ada biru di mana pun dalam palet. Provenance: explicit (creative direction).
• NFR-06 — Integritas pencatatan tayangan. Tayangan iklan yang gagal dicatat tidak dihitung sebagai pendapatan; state terkini tetap dapat dilihat pemilik di Revenue. Provenance: required_inference (diperlukan agar FR-03 dapat diandalkan).
• NFR-07 — Integrasi backend. Aplikasi memerlukan integrasi backend untuk menyimpan konten tontonan, mencatat tayangan iklan, dan mengagregasi pendapatan. Provenance: required_inference (diperlukan agar FR-01, FR-02, FR-03, FR-07, FR-08 dapat berjalan).

10. Tech Stack

Tidak ada pilihan teknologi yang dinyatakan secara eksplisit oleh pengguna. Item berikut adalah default yang koheren untuk aplikasi web dengan antarmuka kustom dan integrasi backend, diberi label sebagai default.

• Frontend: React — [Default — not specified by user]
• Backend: Python / FastAPI — [Default — not specified by user]
• Storage: basis data relasional untuk konten tontonan, catatan tayangan iklan, dan agregasi pendapatan — [Default — not specified by user]
• Kontainerisasi: Docker / docker-compose — [Default — not specified by user]
• Orkestrasi: Kubernetes hanya jika kebutuhan deployment menuntut; tidak diperlukan untuk cakupan saat ini — [Default — not specified by user]

11. Assumptions and Constraints

• A-01. Penonton dapat mengakses Landing, Browse, dan Watch tanpa identitas. Ini adalah keputusan produk yang disengaja: nilai produk berasal dari orang lain yang menonton, sehingga hambatan identitas pada alur menonton akan mengurangi tayangan iklan. Provenance: required_inference.
• A-02. Pemilik Aplikasi memerlukan identitas aplikasi untuk mengakses Content dan Revenue, karena kedua permukaan itu mengikat state tahan lama (konten yang disediakan, pendapatan yang dihasilkan) yang harus tetap terikat pada pemilik yang benar. Provenance: required_inference.
• A-03. Identitas pemilik dibangun melalui self-service enrollment (Sign Up) dan diverifikasi kembali melalui Login. Tidak ada mekanisme invitation, provisioning, atau deployment bootstrap yang dinyatakan dalam sumber. Provenance: required_inference.
• A-04. Sign Up dan Login dapat diakses tanpa identitas; Content dan Revenue tidak dapat diakses tanpa identitas pemilik yang terverifikasi. Provenance: required_inference.
• A-05. Iklan ditayangkan di dalam alur pemutaran tontonan di Watch. Sumber tidak menyatakan mekanisme penargetan, frekuensi, atau penyedia iklan; ini tetap tidak ditentukan. Provenance: explicit (penayangan iklan), unspecified (mekanisme).
• A-06. Pendapatan dihitung dari iklan yang ditonton. Sumber tidak menyatakan tarif, model pembayaran, atau jadwal pencairan; ini tetap tidak ditentukan. Provenance: explicit (pendapatan dari iklan), unspecified (tarif dan pencairan).
• A-07. Tidak ada horizon masa depan yang dinyatakan dalam sumber. Semua cakupan dalam dokumen ini adalah cakupan saat ini. Provenance: explicit.
• A-08. Tidak ada content_source yang dinyatakan; tidak ada Source Content Inventory yang disertakan. Provenance: explicit.
• A-09. Aplikasi tidak menambahkan kemampuan di luar alur tontonan, pengelolaan konten, dan pemantauan pendapatan. Tidak ada fitur sosial, rekomendasi, atau kategori produk streaming lain yang ditambahkan. Provenance: explicit (batas sempit dari sumber).

12. Glossary

• nonton-iklan — Nama proyek aplikasi nonton yang menghasilkan uang bagi pemiliknya dari iklan yang ditonton orang lain.
• Penonton (Viewer) — Orang lain yang menonton tontonan dan iklan di dalam aplikasi; sumber tayangan iklan.
• Pemilik Aplikasi (Owner) — Pemilik yang menyediakan konten tontonan dan menerima uang dari iklan yang ditonton.
• Tontonan — Konten yang tersedia untuk ditonton di aplikasi, dengan judul, durasi, dan thumbnail.
• Iklan — Materi yang ditayangkan di dalam alur pemutaran tontonan dan menghasilkan pendapatan bagi pemilik.
• Tayangan (impresi) — Satu kejadian iklan ditonton oleh Penonton; unit yang menghasilkan pendapatan.
• Pendapatan — Uang yang dihasilkan dari iklan yang ditonton, dinyatakan dalam rupiah.
• Content — Permukaan tempat pemilik mengelola konten tontonan yang tersedia di aplikasi.
• Revenue — Permukaan tempat pemilik melihat pendapatan yang dihasilkan dari iklan yang ditonton.
• Sign Up — Permukaan tempat pemilik menyelesaikan pendaftaran mandiri untuk membentuk identitas aplikasi.
• Login — Permukaan tempat pemilik melalui verifikasi kembali untuk melanjutkan akses ke Content dan Revenue.
• Landing — Permukaan masuk anonim yang menjelaskan aplikasi nonton dan manfaatnya.
• Browse — Permukaan tempat Penonton menjelajahi dan memilih tontonan yang tersedia.
• Watch — Permukaan tempat Penonton memutar tontonan dan melihat iklan yang disertakan dalam alur pemutaran.