System Requirements Document for lokasi-akurat-instagram

1. Introduction

lokasi-akurat-instagram adalah website yang memungkinkan seorang operator membuat tautan pelacak dari sebuah URL Instagram atau TikTok, membagikannya, dan kemudian melihat lokasi akurat dari setiap orang yang membuka tautan tersebut. Produk ini menjawab kebutuhan praktis: ketika sebuah tautan media sosial dibagikan, pemilik tautan ingin mengetahui di mana tautan itu benar-benar dibuka — bukan sekadar berapa kali diklik.

Inti produk adalah dua sisi pengalaman yang saling terhubung:

1. Sisi Operator Pelacak — membuat tautan pelacak, mengelola daftar tautan, dan membaca lokasi akurat yang tercatat.
2. Sisi Pengunjung Tautan — membuka tautan yang dibagikan, memberikan izin lokasi secara eksplisit, dan diteruskan ke konten Instagram atau TikTok tujuan.

Produk ini dirancang untuk operator media sosial Indonesia dan pengguna sehari-hari yang penasaran, dengan penekanan pada izin eksplisit sebagai syarat mutlak sebelum lokasi apa pun dicatat. Lokasi hanya dicatat setelah Pengunjung Tautan memberikan izin lokasi secara sadar melalui mekanisme izin lokasi peramban; tanpa izin tersebut, tidak ada lokasi yang tersimpan.

Audience: Operator Pelacak (pembuat dan pengelola tautan) dan Pengunjung Tautan (pembuka tautan yang menjadi sumber data lokasi).

2. System Overview

Sistem terdiri dari aplikasi web dengan identitas milik aplikasi (app-owned identity), antarmuka kustom (custom UI), dan integrasi backend untuk menyimpan tautan pelacak serta lokasi yang tercatat secara durable.

Aktor:

Perilaku yang diterima (current):

• Menerima dan menangani tautan Instagram dan TikTok sebagai objek pelacakan.
• Menghasilkan tautan pelacak yang dapat dibagikan dari URL Instagram atau TikTok.
• Meminta izin lokasi secara eksplisit dari Pengunjung Tautan sebelum lokasi akurat dicatat.
• Mencatat lokasi akurat dari pembukaan tautan yang diizinkan.
• Meneruskan Pengunjung Tautan ke URL Instagram atau TikTok tujuan setelah pencatatan.
• Menampilkan daftar dan detail lokasi akurat yang tercatat kepada Operator Pelacak.
• Pendaftaran mandiri dan verifikasi kembali identitas Operator Pelacak untuk mengakses tautan dan lokasi yang tersimpan.

Kepemilikan (ownership):

• Identitas aplikasi dimiliki oleh aplikasi (app-owned identity) — Operator Pelacak mendaftar dan masuk melalui halaman aplikasi.
• Antarmuka kustom (custom UI) untuk seluruh halaman produk.
• Backend aplikasi memiliki penyimpanan durable untuk tautan dan lokasi tercatat.
• Instagram dan TikTok tetap menjadi pemilik konten tujuan; sistem hanya meneruskan pengunjung ke sana.

Pengecualian sempit (narrow exclusions):

• Sistem tidak mencatat lokasi tanpa izin eksplisit dari Pengunjung Tautan.
• Sistem tidak mengambil alih, menyalin, atau menampilkan konten Instagram/TikTok; sistem hanya meneruskan ke URL tujuan.
• Sistem tidak menyediakan analitik lanjutan, pelacakan lintas-situs, atau integrasi pihak ketiga di luar yang tercantum.

2a. Product Interpretation and Delivery Boundary

Batas pengiriman saat ini (current): Seluruh halaman yang tercantum di bawah ini adalah bagian dari pengiriman saat ini. Aplikasi web ini menyajikan antarmuka kustom untuk Operator Pelacak dan Pengunjung Tautan, dengan identitas milik aplikasi untuk Operator Pelacak dan akses anonim untuk Pengunjung Tautan pada halaman penerusan.

Kepemilikan akses:

• Landing, Sign Up, Login, dan Link Redirect dapat diakses tanpa identitas (anonim).
• Links, Create Link, dan Locations dibatasi untuk Operator Pelacak yang telah terverifikasi (role_restricted).

Batas saat ini vs. masa depan: Tidak ada fitur masa depan yang didefinisikan dalam sumber. Semua perilaku yang dijelaskan dalam dokumen ini adalah bagian dari pengiriman saat ini.

Privasi dan izin: Pencatatan lokasi hanya terjadi setelah Pengunjung Tautan memberikan izin lokasi secara eksplisit melalui mekanisme izin peramban. Jika izin ditolak atau tidak tersedia, tidak ada lokasi yang dicatat, dan pengunjung tetap diteruskan ke konten tujuan.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan; bagian ini tidak berlaku.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Penjelasan produk (melacak lokasi akurat saat pengguna membuka tautan Instagram atau TikTok), pengguna sasaran (Operator Pelacak dan Pengunjung Tautan), dan alur kerja: buat tautan → bagikan → pengunjung membuka → izin lokasi → lokasi tercatat → diteruskan ke konten tujuan.
• Aksi utama: "Buat Tautan Pertama" (CTA menuju Sign Up bagi pengunjung baru, atau Login bagi yang sudah punya akun).
• Aksi pendukung: Navigasi ke Login; tautan ke Sign Up.
• Entitas domain: Tautan pelacak, izin lokasi, lokasi tercatat (sebagai konsep yang dijelaskan).
• Tanggung jawab komponen: Hero dengan headline "LACAK LOKASI TAUTAN"; instrument strip dengan tiga sel readout (LAT, LNG, WAKTU); tile ikon pixel map-pin; grid delapan tile ikon peristiwa pelacakan; CTA pill pine.
• State: Loading (tidak ada — halaman statis), Empty (tidak berlaku), Success (halaman tampil), Error (tidak berlaku), Recovery (tidak berlaku).

Sign Up

• Informasi/state: Formulir pendaftaran identitas aplikasi untuk Operator Pelacak.
• Aksi utama: Mendaftar dengan kredensial (email dan kata sandi).
• Aksi pendukung: Navigasi ke Login jika sudah punya akun.
• Entitas domain: Akun Operator Pelacak.
• Tanggung jawab komponen: Formulir pendaftaran; validasi input; pesan kesalahan; tombol submit.
• State: Loading (saat mengirim formulir), Empty (formulir kosong), Success (akun dibuat, diarahkan ke Login atau langsung masuk), Error (kredensial tidak valid, email sudah terdaftar), Recovery (pesan kesalahan dengan kesempatan memperbaiki input).

Login

• Informasi/state: Formulir verifikasi kembali identitas Operator Pelacak.
• Aksi utama: Masuk dengan kredensial.
• Aksi pendukung: Navigasi ke Sign Up jika belum punya akun.
• Entitas domain: Akun Operator Pelacak, sesi.
• Tanggung jawab komponen: Formulir login; validasi input; pesan kesalahan; tombol submit.
• State: Loading (saat mengirim formulir), Empty (formulir kosong), Success (diarahkan ke Links), Error (kredensial salah), Recovery (pesan kesalahan dengan kesempatan memperbaiki input).

Links

• Informasi/state: Daftar tautan pelacak yang telah dibuat oleh Operator Pelacak, beserta statusnya.
• Aksi utama: Melihat daftar tautan; membuka detail tautan; menyalin tautan pelacak untuk dibagikan.
• Aksi pendukung: Navigasi ke Create Link; navigasi ke Locations.
• Entitas domain: Tautan pelacak (URL asal Instagram/TikTok, tautan pelacak yang dihasilkan, status, waktu dibuat).
• Tanggung jawab komponen: Daftar tile tautan; status chip (DIKIRIM / DIBUKA / DIIZINKAN / DICATAT); tombol salin tautan; navigasi ke detail.
• State: Loading (saat memuat daftar), Empty (belum ada tautan — tampilkan ajakan membuat tautan pertama), Success (daftar tampil), Error (gagal memuat — tampilkan pesan dan tombol coba lagi), Recovery (coba lagi).

Create Link

• Informasi/state: Formulir terfokus untuk menerima URL Instagram atau TikTok dan menghasilkan tautan pelacak.
• Aksi utama: Mengirim URL Instagram atau TikTok; menghasilkan tautan pelacak yang dapat dibagikan.
• Aksi pendukung: Menyalin tautan pelacak yang dihasilkan; kembali ke Links.
• Entitas domain: URL asal (Instagram/TikTok), tautan pelacak yang dihasilkan.
• Tanggung jawab komponen: Input URL; validasi bahwa URL adalah Instagram atau TikTok; tombol submit; tampilan tautan pelacak yang dihasilkan; tombol salin.
• State: Loading (saat memproses), Empty (formulir kosong), Success (tautan pelacak dihasilkan dan dapat disalin), Error (URL tidak valid atau bukan Instagram/TikTok — tampilkan pesan kesalahan), Recovery (perbaiki URL dan kirim ulang).

Link Redirect

• Informasi/state: Halaman tujuan tautan pelacak yang meminta izin lokasi Pengunjung Tautan, mencatat lokasi yang diizinkan, dan meneruskan ke konten Instagram atau TikTok.
• Aksi utama: Memberikan izin lokasi secara eksplisit; diteruskan ke URL Instagram atau TikTok tujuan.
• Aksi pendukung: Menolak izin lokasi (pengunjung tetap diteruskan ke konten tujuan tanpa pencatatan lokasi).
• Entitas domain: Tautan pelacak, izin lokasi, lokasi tercatat (koordinat), URL tujuan.
• Tanggung jawab komponen: Permintaan izin lokasi; indikator status (menunggu izin, mencatat, meneruskan); pengalihan ke URL tujuan.
• State: Loading (saat meminta izin dan mencatat), Empty (tidak berlaku), Success (lokasi dicatat dan pengunjung diteruskan), Error (izin ditolak atau lokasi tidak tersedia — pengunjung tetap diteruskan tanpa pencatatan), Recovery (pengunjung tetap sampai di konten tujuan).

Locations

• Informasi/state: Daftar dan detail lokasi akurat yang tercatat dari pembukaan tautan oleh Pengunjung Tautan.
• Aksi utama: Melihat daftar lokasi tercatat; membuka detail lokasi (koordinat, waktu, tautan terkait).
• Aksi pendukung: Navigasi ke Links; memfilter atau menelusuri berdasarkan tautan.
• Entitas domain: Lokasi tercatat (koordinat LAT/LNG, waktu pencatatan, tautan pelacak terkait).
• Tanggung jawab komponen: Daftar tile lokasi; readout koordinat tabular; timestamp; tautan ke tautan pelacak terkait.
• State: Loading (saat memuat daftar), Empty (belum ada lokasi tercatat — tampilkan pesan), Success (daftar tampil), Error (gagal memuat — tampilkan pesan dan tombol coba lagi), Recovery (coba lagi).

3. Functional Requirements

FR-1 — Membuat tautan pelacak dari URL Instagram atau TikTok

• Provenance: explicit
• Story: As an Operator Pelacak, I should submit an Instagram or TikTok URL and receive a shareable tracking link, so that I can distribute it and later see where it was opened.
• Trigger/input: Operator Pelacak mengirim URL Instagram atau TikTok melalui halaman Create Link.
• Observable result: Tautan pelacak yang dapat dibagikan dihasilkan dan ditampilkan.
• Access state: role_restricted (Operator Pelacak terverifikasi).
• Failure/recovery: Jika URL tidak valid atau bukan Instagram/TikTok, tampilkan pesan kesalahan dan izinkan perbaikan.
• Continuation: Operator Pelacak menyalin tautan pelacak dan membagikannya.

FR-2 — Menerima dan menangani tautan Instagram dan TikTok sebagai objek pelacakan

• Provenance: explicit
• Story: As an Operator Pelacak, I should be able to use both Instagram and TikTok URLs as tracking objects, so that I can track links from either platform.
• Trigger/input: URL Instagram atau TikTok yang valid.
• Observable result: Tautan pelacak dibuat untuk platform yang sesuai.
• Access state: role_restricted.
• Failure/recovery: URL dari platform lain ditolak dengan pesan kesalahan.
• Continuation: Tautan pelacak siap dibagikan.

FR-3 — Meminta izin lokasi secara eksplisit sebelum pencatatan

• Provenance: required_inference
• Story: As a Pengunjung Tautan, I should be asked for explicit location permission before any location is recorded, so that I stay in control of my data.
• Trigger/input: Pengunjung Tautan membuka tautan pelacak di halaman Link Redirect.
• Observable result: Permintaan izin lokasi ditampilkan; lokasi hanya dicatat setelah izin diberikan.
• Access state: none (anonim).
• Failure/recovery: Jika izin ditolak atau tidak tersedia, tidak ada lokasi yang dicatat; pengunjung tetap diteruskan.
• Continuation: Pengunjung diteruskan ke konten tujuan.

FR-4 — Mencatat lokasi akurat dari pembukaan tautan yang diizinkan

• Provenance: explicit
• Story: As an Operator Pelacak, I should see the accurate location of each permitted link opening, so that I know where the link was actually opened.
• Trigger/input: Pengunjung Tautan memberikan izin lokasi.
• Observable result: Koordinat lokasi akurat dicatat dan dikaitkan dengan tautan pelacak.
• Access state: role_restricted (untuk melihat); none (untuk mencatat).
• Failure/recovery: Jika lokasi tidak tersedia, tidak ada yang dicatat; pengunjung tetap diteruskan.
• Continuation: Lokasi muncul di halaman Locations.

FR-5 — Meneruskan Pengunjung Tautan ke URL Instagram atau TikTok tujuan

• Provenance: required_inference
• Story: As a Pengunjung Tautan, I should be forwarded to the original Instagram or TikTok content after the recording step, so that I reach the content I intended to open.
• Trigger/input: Pengunjung Tautan membuka tautan pelacak.
• Observable result: Pengunjung diarahkan ke URL Instagram atau TikTok tujuan.
• Access state: none (anonim).
• Failure/recovery: Jika pencatatan gagal, pengunjung tetap diteruskan ke konten tujuan.
• Continuation: Pengunjung melihat konten di Instagram atau TikTok.

FR-6 — Menampilkan daftar dan detail lokasi akurat yang tercatat

• Provenance: explicit
• Story: As an Operator Pelacak, I should view a list and details of recorded accurate locations, so that I can understand where each link was opened.
• Trigger/input: Operator Pelacak membuka halaman Locations.
• Observable result: Daftar lokasi tercatat dengan koordinat, waktu, dan tautan terkait ditampilkan.
• Access state: role_restricted.
• Failure/recovery: Jika gagal memuat, tampilkan pesan dan tombol coba lagi.
• Continuation: Operator Pelacak dapat membuka detail lokasi.

FR-7 — Pendaftaran mandiri Operator Pelacak

• Provenance: required_inference
• Story: As an Operator Pelacak, I should complete self-service registration before creating tracking links, so that my links and recorded locations are bound to my account.
• Trigger/input: Operator Pelacak membuka halaman Sign Up dan mengirim kredensial.
• Observable result: Akun aplikasi dibuat.
• Access state: none (anonim).
• Failure/recovery: Jika kredensial tidak valid atau email sudah terdaftar, tampilkan pesan kesalahan.
• Continuation: Operator Pelacak masuk dan membuat tautan.

FR-8 — Verifikasi kembali untuk mengakses tautan dan lokasi tersimpan

• Provenance: required_inference
• Story: As an Operator Pelacak, I should verify my identity again to access my stored links and locations, so that my durable data stays protected.
• Trigger/input: Operator Pelacak membuka halaman Login dan mengirim kredensial.
• Observable result: Sesi dibuat; akses ke Links, Create Link, dan Locations diberikan.
• Access state: none (anonim untuk login); role_restricted setelah masuk.
• Failure/recovery: Jika kredensial salah, tampilkan pesan kesalahan.
• Continuation: Operator Pelacak mengakses tautan dan lokasi.

FR-9 — Mengelola daftar tautan pelacak

• Provenance: required_inference
• Story: As an Operator Pelacak, I should view and manage the list of tracking links I have created, so that I can track and share them.
• Trigger/input: Operator Pelacak membuka halaman Links.
• Observable result: Daftar tautan pelacak dengan status ditampilkan.
• Access state: role_restricted.
• Failure/recovery: Jika gagal memuat, tampilkan pesan dan tombol coba lagi.
• Continuation: Operator Pelacak menyalin tautan atau membuka detail.

4. User Personas

Operator Pelacak

Konteks produk: Operator Pelacak adalah pengguna yang membuat dan mengelola tautan pelacak dari URL Instagram atau TikTok, membagikannya, dan memantau lokasi akurat dari setiap pembukaan tautan. Ia bekerja berulang kali: membuat tautan, membagikannya, dan melihat hasil lokasi yang terkumpul.

Tujuan utama: Mengetahui lokasi akurat dari setiap pembukaan tautan yang dibagikannya.

Tanggung jawab yang diterima:

• Mendaftar identitas aplikasi secara mandiri (Sign Up).
• Melakukan verifikasi kembali untuk mengakses data tersimpan (Login).
• Membuat tautan pelacak dari URL Instagram atau TikTok (Create Link).
• Mengelola dan membagikan tautan pelacak (Links).
• Melihat daftar dan detail lokasi akurat yang tercatat (Locations).

Input/keputusan: URL Instagram atau TikTok; keputusan untuk membagikan tautan; keputusan untuk membuka detail lokasi.

Interaksi dengan peserta lain: Operator Pelacak bergantung pada Pengunjung Tautan untuk membuka tautan dan memberikan izin lokasi. Tanpa tindakan Pengunjung Tautan, tidak ada lokasi yang tercatat.

Keberhasilan yang dapat diamati: Operator Pelacak melihat daftar lokasi akurat yang tercatat, masing-masing terkait dengan tautan pelacak yang dibuatnya.

Yang membedakan peran ini: Operator Pelacak adalah satu-satunya aktor yang membuat dan mengelola tautan serta melihat data lokasi. Ia membutuhkan identitas aplikasi yang persisten untuk mengikat tautan dan lokasi ke akunnya.

Pengunjung Tautan

Konteks produk: Pengunjung Tautan adalah orang yang membuka tautan Instagram atau TikTok yang dibagikan oleh Operator Pelacak. Ia menjadi sumber data lokasi, tetapi hanya setelah memberikan izin eksplisit.

Tujuan utama: Diarahkan ke konten Instagram atau TikTok tujuan sambil lokasinya tercatat (jika ia mengizinkan).

Tanggung jawab yang diterima:

• Membuka tautan pelacak (Link Redirect).
• Memberikan izin lokasi secara eksplisit.
• Diteruskan ke konten tujuan.

Input/keputusan: Keputusan untuk memberikan atau menolak izin lokasi.

Interaksi dengan peserta lain: Pengunjung Tautan berinteraksi dengan Operator Pelacak secara tidak langsung: tindakannya (membuka tautan dan memberikan izin) menghasilkan data lokasi yang dilihat Operator Pelacak.

Keberhasilan yang dapat diamati: Pengunjung Tautan sampai di konten Instagram atau TikTok tujuan; lokasinya tercatat jika ia mengizinkan.

Yang membedakan peran ini: Pengunjung Tautan tidak memiliki akun dan tidak mengelola tautan. Ia hanya berinteraksi sekali dengan halaman penerusan, dan kontrol atas datanya ada di tangannya melalui izin lokasi.

5. Core User Flows

Flow 1: Operator Pelacak mendaftar dan masuk

1. Operator Pelacak membuka halaman Landing dan menekan "Buat Tautan Pertama".
2. Sistem mengarahkan ke halaman Sign Up.
3. Operator Pelacak mengisi kredensial dan mengirim formulir.
4. Sistem membuat akun dan mengarahkan ke halaman Login.
5. Operator Pelacak memasukkan kredensial dan masuk.
6. Sistem membuat sesi dan mengarahkan ke halaman Links.
7. Kegagalan: Jika kredensial tidak valid, sistem menampilkan pesan kesalahan dan Operator Pelacak dapat mencoba lagi.

Flow 2: Operator Pelacak membuat tautan pelacak

1. Operator Pelacak (sudah masuk) membuka halaman Create Link.
2. Operator Pelacak memasukkan URL Instagram atau TikTok.
3. Sistem memvalidasi URL.
4. Sistem menghasilkan tautan pelacak yang dapat dibagikan dan menampilkannya.
5. Operator Pelacak menyalin tautan pelacak.
6. Kegagalan: Jika URL tidak valid atau bukan Instagram/TikTok, sistem menampilkan pesan kesalahan dan Operator Pelacak dapat memperbaiki input.
7. Kelanjutan: Operator Pelacak membagikan tautan pelacak melalui saluran pilihannya.

Flow 3: Operator Pelacak mengelola tautan

1. Operator Pelacak membuka halaman Links.
2. Sistem menampilkan daftar tautan pelacak dengan status (DIKIRIM / DIBUKA / DIIZINKAN / DICATAT).
3. Operator Pelacak dapat menyalin tautan atau membuka detail.
4. Kegagalan: Jika daftar gagal dimuat, sistem menampilkan pesan dan tombol coba lagi.
5. Kelanjutan: Operator Pelacak dapat membuat tautan baru melalui Create Link.

Flow 4: Pengunjung Tautan membuka tautan dan memberikan izin lokasi

1. Pengunjung Tautan menerima tautan pelacak yang dibagikan dan membukanya.
2. Sistem menampilkan halaman Link Redirect dan meminta izin lokasi secara eksplisit.
3. Pengunjung Tautan memberikan izin lokasi.
4. Sistem mencatat lokasi akurat dan mengaitkannya dengan tautan pelacak.
5. Sistem meneruskan Pengunjung Tautan ke URL Instagram atau TikTok tujuan.
6. Kegagalan: Jika Pengunjung Tautan menolak izin atau lokasi tidak tersedia, tidak ada lokasi yang dicatat; Pengunjung Tautan tetap diteruskan ke konten tujuan.
7. Kelanjutan: Pengunjung Tautan melihat konten di Instagram atau TikTok.

Flow 5: Operator Pelacak melihat lokasi akurat yang tercatat

1. Operator Pelacak membuka halaman Locations.
2. Sistem menampilkan daftar lokasi tercatat dengan koordinat, waktu, dan tautan terkait.
3. Operator Pelacak membuka detail lokasi.
4. Kegagalan: Jika daftar gagal dimuat, sistem menampilkan pesan dan tombol coba lagi.
5. Kelanjutan: Operator Pelacak dapat kembali ke Links atau melihat lokasi lain.

6. Visuals Colors and Theme

Muse: Susan Kare. Headline: Charming clarity — a locator built from pixel-perfect instrument symbols.

Bahasa visual produk ini adalah sistem ikon dan tile ala Macintosh awal: simbol kecil yang ramah namun presisi, disusun di atas kertas hangat. Ini membuat pelacakan lokasi terasa seperti instrumen yang dapat dipercaya, bukan konsol pengawasan.

Palet (light mode)

Rasio kira-kira 60% kertas, 25% ink/tile, 10% pine, 5% orange. Tidak ada biru di mana pun.

Tipografi

• Headings: Silkscreen, 700. Selalu uppercase, tracking lebar. Digunakan untuk angka display, status chip, dan label seksi.
• Body: Karla, 400/500/700. Line-height 1.55. 700 hanya untuk penekanan inline dan label kontrol.
• Skala: 1.333 modular — display 44px mobile → 112px desktop (clamp); section head 28→48; card title 20→28; body 16→17; micro-label 12→13 uppercase tracked +0.08em.
• Angka: Selalu tabular agar koordinat dan timestamp sejajar dalam kolom.

Bentuk

• Tile outline tebal dengan border ink 3–4px solid dan radius sudut 10px.
• Hard 2px offset shadow dalam ink (tidak pernah blur).
• Pill status chip.
• Notch sudut 8px pixel-step pada tracking marker.
• Tidak ada soft glass, tidak ada gradient fill, tidak ada rounded-everything.

Layout

• Grid 12 kolom yang terlihat di atas kertas hangat.
• Dashboard adalah mosaik tile ikon: setiap tautan yang dilacak adalah satu tile dengan glyph pixel map-pin, status chip, dan readout koordinat tabular.
• Left rail adalah dock ikon vertikal (links, locations, create, account) dengan pictogram pixel dan label teks.
• Seksi konten dipisahkan oleh garis ink 2px, bukan oleh whitespace saja.
• Di mobile, dock runtuh menjadi bottom icon bar dan tile ditumpuk full-width dengan readout koordinat tetap utuh dan membungkus.

Imagery

Pictogram pixel dan pictogram sederhana saja: map pin, signal arcs, clock faces, link glyphs, globe kecil, cursor arrows — semua digambar pada grid 8px dalam ink, pine, dan orange. Tidak ada fotografi, tidak ada ilustrasi dekoratif, tidak ada render 3D. Data produk sendiri — koordinat, timestamp, status — adalah imagery-nya.

7. Signature Design Concept

Instrument Strip Hero — Layar pertama yang flat dan poster-like di atas kertas hangat.

Komposisi:

• Dua pertiga kiri: Headline Silkscreen raksasa "LACAK LOKASI TAUTAN" ditumpuk dalam tiga baris, ink di atas kertas, 44px di mobile naik ke 112px di desktop. Kata terakhir ("TAUTAN") diset dalam pine dengan underline orange 2px yang memanjang ke tepi viewport.
• Di bawah headline: Sebuah instrument strip — panel horizontal bergaris yang menampung tiga readout pixel live (LAT, LNG, WAKTU) dalam tabular digit, masing-masing dalam sel berbingkai sendiri, dengan kursor orange berkedip setelah digit terakhir.
• Sepertiga kanan: Glyph pixel map-pin besar dalam tile ber-outline ink dengan hard offset shadow, duduk di atas grid kecil berisi delapan tile ikon 40px yang masing-masing mewakili satu peristiwa pelacakan.
• CTA: "Buat Tautan Pertama" adalah pill pine dengan outline ink yang dipasang di bawah instrument strip, tidak pernah di tengah.

Signature moves:

1. Instrument strip hero dengan tiga sel berbingkai menampilkan readout tabular LAT / LNG / WAKTU live dengan kursor orange berkedip, membentang dari tepi kiri headline ke tepi viewport di desktop.
2. Setiap tautan yang dilacak adalah tile ikon outline tebal dengan hard 2px offset ink shadow; hover membalik arah shadow sebesar 2px sebagai penekanan fisik, bukan lift.
3. Dock ikon pixel vertikal sebagai navigasi utama, setiap ikon digambar pada grid 8px dengan label teks di bawahnya, runtuh menjadi bottom bar pada 375px.
4. Status chip yang snap antara DIKIRIM / DIBUKA / DIIZINKAN / DICATAT melalui 2-frame pixel wipe, dengan chip aktif membawa underline orange 2px.
5. Angka koordinat tick digit-by-digit saat tiba, tabular-aligned dalam kolom bergaris sehingga setiap lokasi tercatat sejajar vertikal seperti ledger.

Yang dihindari: Biru atau indigo sebagai primary/accent; shadow blur; glassmorphism; gradient fill atau blob; Inter, Roboto, Arial, Helvetica, Poppins, atau system-ui untuk headings atau body; fotografi, stock people, render 3D, atau ilustrasi dekoratif; komposisi hero SaaS centered headline + subtext + button; grid kartu identik dengan hover-lift dan soft shadow; sudut blur atau rounded-everything.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: Instrument strip dengan tiga readout tabular (LAT, LNG, WAKTU) dan kursor orange berkedip, ditemani glyph pixel map-pin besar.
• Input → transformation → outcome thesis: Saat halaman dimuat, digit koordinat pada instrument strip tick digit-by-digit hingga nilai akhirnya, kursor orange berkedip pada 1Hz seperti kursor Macintosh awal, dan status chip pada grid tile peristiwa snap melalui 2-frame pixel wipe. Hasilnya adalah hero yang terasa seperti instrumen hidup yang siap melacak — bukan animasi dekoratif.
• Motion vocabulary: Frame-by-frame micro-animations; blink 1Hz; 2-frame pixel wipe; digit tick; hover shadow flip 2px. Tidak ada easing theatrics, tidak ada parallax, tidak ada bounce.
• Composed first frame: Headline "LACAK LOKASI TAUTAN" dalam tiga baris ink di atas kertas hangat, kata terakhir pine dengan underline orange; instrument strip di bawahnya dengan tiga sel berbingkai menampilkan digit tabular; glyph map-pin besar di kanan dalam tile ber-outline dengan hard offset shadow; CTA pill pine di bawah instrument strip.
• Reduced-motion state: Semua animasi berhenti pada frame akhirnya: digit koordinat menampilkan nilai akhir, kursor orange tetap terlihat tanpa berkedip, status chip menampilkan state akhirnya. Tata letak tetap utuh dan dapat dibaca.

9. Non-Functional Requirements

NFR-1 — Izin lokasi eksplisit (privacy)

• Provenance: required_inference
• Constraint: Lokasi hanya dicatat setelah Pengunjung Tautan memberikan izin lokasi secara eksplisit melalui mekanisme izin peramban. Tanpa izin, tidak ada lokasi yang disimpan.
• Rationale: Melindungi privasi Pengunjung Tautan dan memastikan kontrol ada di tangan pengguna.

NFR-2 — Penyimpanan durable

• Provenance: required_inference
• Constraint: Tautan pelacak dan lokasi tercatat disimpan secara durable dan terikat pada akun Operator Pelacak.
• Rationale: Operator Pelacak perlu mengakses kembali tautan dan lokasi yang tersimpan.

NFR-3 — Identitas aplikasi

• Provenance: required_inference
• Constraint: Operator Pelacak mendaftar dan masuk melalui halaman aplikasi; akses ke Links, Create Link, dan Locations dibatasi untuk Operator Pelacak terverifikasi.
• Rationale: Memastikan data tautan dan lokasi tetap terikat pada pemiliknya.

NFR-4 — Aksesibilitas visual

• Provenance: required_inference
• Constraint: Teks dan kontrol yang dapat dibaca tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px; tidak ada elemen yang menutupi teks atau kontrol yang dapat dibaca.
• Rationale: Memastikan keterbacaan di semua viewport.

NFR-5 — Penerusan yang andal

• Provenance: required_inference
• Constraint: Pengunjung Tautan harus tetap diteruskan ke URL Instagram atau TikTok tujuan bahkan jika pencatatan lokasi gagal atau izin ditolak.
• Rationale: Memastikan pengalaman pengunjung tidak terganggu oleh kegagalan pencatatan.

10. Tech Stack

• Frontend: React (web) dengan antarmuka kustom.
• Backend: Python/FastAPI untuk API pembuatan tautan, pencatatan lokasi, dan autentikasi.
• Storage: Basis data relasional untuk menyimpan akun Operator Pelacak, tautan pelacak, dan lokasi tercatat.
• Deployment: Docker/docker-compose untuk menjalankan frontend dan backend.

11. Assumptions and Constraints

Asumsi:

• A-1: Pengunjung Tautan menggunakan peramban yang mendukung permintaan izin lokasi. Jika tidak, tidak ada lokasi yang dicatat dan pengunjung tetap diteruskan.
• A-2: URL Instagram dan TikTok yang valid dapat dikenali dari formatnya.
• A-3: Operator Pelacak memiliki akses ke saluran untuk membagikan tautan pelacak (di luar cakupan sistem).

Batasan:

• C-1: Sistem tidak mencatat lokasi tanpa izin eksplisit dari Pengunjung Tautan.
• C-2: Sistem tidak menyalin, menampilkan, atau mengambil alih konten Instagram/TikTok; sistem hanya meneruskan ke URL tujuan.
• C-3: Instagram dan TikTok tetap menjadi pemilik konten tujuan.
• C-4: Tidak ada fitur masa depan yang didefinisikan dalam sumber; semua perilaku dalam dokumen ini adalah bagian dari pengiriman saat ini.

12. Glossary

• Operator Pelacak: Pengguna yang membuat, mengelola, dan membagikan tautan pelacak serta melihat lokasi akurat yang tercatat.
• Pengunjung Tautan: Orang yang membuka tautan pelacak yang dibagikan dan menjadi sumber data lokasi setelah memberikan izin.
• Tautan Pelacak: Tautan yang dihasilkan sistem dari URL Instagram atau TikTok, yang dapat dibagikan dan digunakan untuk mencatat lokasi pembukaan.
• Link Redirect: Halaman tujuan tautan pelacak yang meminta izin lokasi, mencatat lokasi yang diizinkan, dan meneruskan pengunjung ke konten tujuan.
• Lokasi Akurat: Koordinat lokasi yang dicatat dari pembukaan tautan yang diizinkan.
• Izin Lokasi: Persetujuan eksplisit dari Pengunjung Tautan melalui mekanisme izin peramban sebelum lokasi dicatat.
• Status Chip: Indikator visual status tautan pelacak: DIKIRIM / DIBUKA / DIIZINKAN / DICATAT.
• Instrument Strip: Panel horizontal bergaris pada hero yang menampilkan tiga readout tabular (LAT, LNG, WAKTU).