System Requirements Document for jaringan-wifi

1. Introduction

jaringan-wifi adalah aplikasi web sederhana yang dibangun sepenuhnya dengan HTML, CSS, dan JavaScript (tanpa backend). Aplikasi ini menampilkan daftar nama jaringan WiFi yang tersedia di sekitar menggunakan data/simulasi dummy, memungkinkan pengguna memilih salah satu jaringan, lalu menampilkan beberapa kemungkinan password yang digenerate secara otomatis sebagai simulasi. Pengguna dapat menekan tombol "generate password" untuk membuat kemungkinan password baru.

Aplikasi ini ditujukan untuk pengguna yang ingin menjelajahi daftar jaringan WiFi simulasi dan melihat contoh kemungkinan password hasil generate otomatis. Seluruh data jaringan dan password bersifat dummy/simulasi — bukan pemindaian jaringan nyata dan bukan password asli.

Desain yang diminta: tampilan modern dan simpel, menggunakan card layout yang responsive sehingga dapat dipakai di HP maupun desktop.

2. System Overview

Aplikasi jaringan-wifi adalah utilitas client-side satu halaman yang berjalan sepenuhnya di browser. Tidak ada server, tidak ada backend, dan tidak ada pemanggilan jaringan eksternal. Seluruh data jaringan WiFi dan password yang ditampilkan adalah data dummy yang disimulasikan di dalam aplikasi.

Aktor:

• Pengguna Pencari Jaringan WiFi — satu-satunya persona aktif yang berinteraksi dengan aplikasi.

Perilaku yang diterima (current):

1. Menampilkan daftar nama jaringan WiFi yang tersedia di sekitar (data dummy).
2. Pengguna dapat memilih salah satu jaringan dari daftar.
3. Setelah jaringan dipilih, aplikasi menampilkan beberapa kemungkinan password yang digenerate secara otomatis (simulasi).
4. Tombol "generate password" untuk membuat kemungkinan password baru.
5. Desain modern dan simpel.
6. Card layout responsive untuk HP dan desktop.

Kepemilikan (ownership):

• Seluruh interaksi pengguna (menelusuri daftar, memilih jaringan, melihat password, menekan tombol generate) dimiliki oleh halaman Landing sebagai satu-satunya surface aplikasi.
• Tidak ada identitas aplikasi, login, atau akun — akses bersifat anonim (access_requirement: none).
• Tidak ada provider eksternal atau sistem backend yang memiliki perilaku apa pun.

Pengecualian (exclusions):

• Tidak ada pemindaian jaringan WiFi nyata.
• Tidak ada password asli — semua password adalah hasil simulasi/generate otomatis.
• Tidak ada backend, server, atau API eksternal.
• Tidak ada fitur di luar yang tercantum di atas.

2a. Product Interpretation and Delivery Boundary

Aplikasi ini adalah alat simulasi/readout, bukan alat cracking atau akses jaringan nyata. Pengguna membuka satu halaman anonim yang langsung menampilkan instrumen: daftar jaringan dummy, pemilihan jaringan, dan panel readout password simulasi. Tidak ada langkah pendaftaran, login, atau verifikasi identitas karena tidak ada state pengguna yang perlu disimpan atau dilanjutkan antar sesi.

Seluruh pekerjaan saat ini (current) tercakup dalam satu halaman Landing. Tidak ada horizon masa depan yang dinyatakan oleh pengguna; tidak ada fitur yang ditunda atau direncanakan.

2b. Source Content Inventory

Tidak ada reference directive dengan content_source yang diberikan untuk proyek ini, sehingga tidak ada Source Content Inventory yang disertakan.

2c. Page Content and Component Coverage

Landing

Halaman tunggal yang menjadi titik masuk anonim sekaligus memuat seluruh alur: daftar jaringan WiFi dummy, pemilihan jaringan, dan simulasi pembuatan kemungkinan password.

Informasi dan State:

• Judul instrumen: "JARINGAN DI SEKITAR" (display headline, dua baris, flush-left).
• Scan-status strip: numeral penghitung jumlah jaringan yang ditemukan (contoh: "07"), status dot teal yang berdenyut, dan keycap "SCAN ULANG".
• Daftar jaringan WiFi dummy sebagai ruled data rows: nama jaringan, band, signal gauge (SVG circular gauge dengan tick marks dan needle), dan lock state (glyph shield 1.5px stroke).
• State terpilih: satu jaringan aktif dengan 2px left edge amber dan bezel arc amber yang menyapu di sekitar gauge-nya.
• Panel READOUT: nama jaringan terpilih dalam condensed caps, baris metadata label/value (band, security, signal, last seen), dan daftar password kandidat sebagai numbered monospace lines masing-masing dengan thin strength bar.
• State kosong (belum ada jaringan dipilih): panel READOUT menampilkan instruksi untuk memilih jaringan.
• State loading/generating: karakter password berkedip melalui random charset sebelum terkunci kiri-ke-kanan (250ms), dengan teal flash 120ms pada strength meter.

Aksi Utama:

• Memilih salah satu jaringan dari daftar (klik/tap pada row).
• Menekan tombol "GENERATE PASSWORD" untuk membuat kemungkinan password baru.
• Menekan keycap "SCAN ULANG" untuk memuat ulang daftar jaringan dummy (simulasi scan ulang).

Aksi Pendukung:

• Menelusuri/scroll daftar jaringan.
• Melihat metadata jaringan terpilih (band, security, signal, last seen).

Domain Entities:

• Jaringan WiFi (dummy): nama, band, signal strength, security type, last seen, lock state.
• Kemungkinan Password (simulasi): string kandidat, strength level.

Tanggung Jawab Komponen:

• Scan Header: menampilkan headline, numeral penghitung, status dot, dan keycap SCAN ULANG.
• Network List Panel: menampilkan ruled data rows untuk setiap jaringan dummy; menangani pemilihan.
• Signal Gauge (SVG): menampilkan kekuatan sinyal sebagai circular gauge dengan tick marks dan needle; bezel arc amber saat terpilih.
• Readout Panel: menampilkan detail jaringan terpilih dan daftar password kandidat.
• Password Candidate Row: menampilkan satu password kandidat sebagai numbered monospace line dengan thin strength bar.
• Generate Password Keycap: tombol untuk membuat password kandidat baru.
• Strength Meter: menampilkan level kekuatan password dengan teal flash saat generate.

State yang Berlaku:

• Loading: gauge menyapu dari 0 ke nilai akhir selama 600ms saat halaman dimuat; numeral menghitung naik.
• Empty: sebelum jaringan dipilih, panel READOUT menampilkan instruksi pemilihan.
• Success: jaringan terpilih ditampilkan dengan bezel amber; password kandidat ditampilkan dengan strength bar.
• Error/Recovery: tidak ada error jaringan (semua data lokal/dummy); jika generate gagal (tidak mungkin dalam implementasi client-side murni), pengguna dapat menekan tombol generate lagi.
• Recovery: pengguna dapat memilih jaringan lain kapan saja untuk mengganti readout.

3. Functional Requirements

FR-1: Menampilkan daftar nama jaringan WiFi

• As a Pengguna Pencari Jaringan WiFi I should melihat daftar nama jaringan WiFi yang tersedia di sekitar (data dummy) so that saya dapat menelusuri jaringan yang tersedia.
• Provenance: explicit
• Trigger/Input: Membuka halaman Landing.
• Observable result: Daftar nama jaringan WiFi dummy ditampilkan sebagai ruled data rows.
• Access state: Anonim (tanpa login).
• Failure/recovery: Tidak ada kegagalan (data lokal).
• Continuation: Pengguna dapat menelusuri daftar dan memilih jaringan.

FR-2: Memilih salah satu jaringan WiFi

• As a Pengguna Pencari Jaringan WiFi I should memilih salah satu jaringan dari daftar so that aplikasi menampilkan kemungkinan password untuk jaringan tersebut.
• Provenance: explicit
• Trigger/Input: Klik/tap pada salah satu row jaringan.
• Observable result: Jaringan terpilih ditandai dengan 2px left edge amber dan bezel arc amber di sekitar gauge-nya; panel READOUT menampilkan detail jaringan terpilih.
• Access state: Anonim.
• Failure/recovery: Tidak ada kegagalan.
• Continuation: Pengguna dapat melihat password kandidat atau memilih jaringan lain.

FR-3: Menampilkan beberapa kemungkinan password yang digenerate otomatis

• As a Pengguna Pencari Jaringan WiFi I should melihat beberapa kemungkinan password yang digenerate secara otomatis (simulasi) setelah memilih jaringan so that saya dapat melihat contoh password kandidat.
• Provenance: explicit
• Trigger/Input: Memilih jaringan dari daftar.
• Observable result: Beberapa password kandidat ditampilkan sebagai numbered monospace lines dengan thin strength bar di panel READOUT.
• Access state: Anonim.
• Failure/recovery: Tidak ada kegagalan.
• Continuation: Pengguna dapat menekan tombol generate untuk password baru.

FR-4: Tombol "generate password" untuk password baru

• As a Pengguna Pencari Jaringan WiFi I should menekan tombol "generate password" untuk membuat kemungkinan password baru so that saya dapat melihat variasi password kandidat lain.
• Provenance: explicit
• Trigger/Input: Klik/tap pada tombol "GENERATE PASSWORD".
• Observable result: Password kandidat baru ditampilkan; karakter berkedip melalui random charset sebelum terkunci kiri-ke-kanan (250ms) dengan teal flash 120ms pada strength meter.
• Access state: Anonim.
• Failure/recovery: Tidak ada kegagalan; pengguna dapat menekan tombol lagi.
• Continuation: Pengguna dapat menekan tombol generate berulang kali atau memilih jaringan lain.

FR-5: Desain modern dan simpel

• As a Pengguna Pencari Jaringan WiFi I should melihat tampilan yang modern dan simpel so that saya dapat menggunakan aplikasi dengan mudah.
• Provenance: explicit
• Trigger/Input: Membuka halaman.
• Observable result: Tampilan mengikuti creative direction: dark graphite ground, ruled data rows, instrument bezels, keycap buttons.
• Access state: Anonim.
• Failure/recovery: Tidak berlaku.
• Continuation: Tidak berlaku.

FR-6: Card layout responsive untuk HP dan desktop

• As a Pengguna Pencari Jaringan WiFi I should menggunakan aplikasi pada HP maupun desktop dengan layout yang responsive so that saya dapat mengaksesnya dari perangkat apa pun.
• Provenance: explicit
• Trigger/Input: Membuka halaman pada viewport 375px, 768px, atau 1280px.
• Observable result: Layout menyesuaikan: desktop 60/40 split, tablet 55/45, mobile single column dengan readout sebagai bottom sheet.
• Access state: Anonim.
• Failure/recovery: Tidak berlaku.
• Continuation: Tidak berlaku.

FR-7: Scan ulang daftar jaringan (simulasi)

• As a Pengguna Pencari Jaringan WiFi I should menekan keycap "SCAN ULANG" untuk memuat ulang daftar jaringan dummy so that saya dapat melihat daftar yang diperbarui.
• Provenance: required_inference (mekanisme indispensable untuk lifecycle scan yang diterima; tombol SCAN ULANG adalah bagian dari hero direction yang diterima)
• Trigger/Input: Klik/tap pada keycap "SCAN ULANG".
• Observable result: Daftar jaringan dummy dimuat ulang; numeral penghitung dan gauge menyapu ulang.
• Access state: Anonim.
• Failure/recovery: Tidak ada kegagalan (data lokal).
• Continuation: Pengguna dapat memilih jaringan dari daftar yang diperbarui.

4. User Personas

Pengguna Pencari Jaringan WiFi

Konteks produk: Pengguna adalah seorang tinkerer yang penasaran, membuka aplikasi di HP atau laptop, sering di ruangan redup pada malam hari. Mereka ingin sesuatu yang terasa seperti peralatan lapangan sungguhan — bukan halaman marketing.

Tujuan utama: Melihat daftar jaringan WiFi yang tersedia (dummy), memilih salah satu, dan melihat beberapa kemungkinan password hasil simulasi yang dapat di-generate ulang.

Tanggung jawab yang diterima:

• Menelusuri daftar nama jaringan WiFi dummy.
• Memilih salah satu jaringan dari daftar.
• Melihat beberapa kemungkinan password yang digenerate otomatis (simulasi).
• Menekan tombol "generate password" untuk membuat kemungkinan password baru.
• (Opsional) Menekan "SCAN ULANG" untuk memuat ulang daftar.

Input/keputusan relevan:

• Memilih jaringan mana yang ingin dilihat passwordnya.
• Memutuskan kapan menekan generate untuk variasi password baru.

Interaksi dengan peserta lain: Tidak ada peserta lain — aplikasi single-user, tanpa backend, tanpa interaksi sosial.

Keberhasilan yang dapat diamati: Pengguna dapat menelusuri daftar, memilih jaringan, dan memperoleh daftar kemungkinan password yang diperbarui sesuai permintaan.

Batasan sumber: Seluruh data adalah dummy/simulasi; password bukan password asli; tidak ada pemindaian jaringan nyata.

5. Core User Flows

Flow 1: Menelusuri daftar dan memilih jaringan

1. Konteks awal: Pengguna membuka halaman Landing di browser (HP atau desktop). Tidak ada login.
2. Aksi: Halaman dimuat; gauge sinyal menyapu dari 0 ke nilai akhir (600ms), numeral menghitung naik, dan daftar jaringan WiFi dummy ditampilkan sebagai ruled data rows.
3. Hasil yang dapat diamati: Pengguna melihat daftar nama jaringan WiFi dengan band, signal gauge, dan lock state.
4. Aksi: Pengguna menelusuri daftar (scroll) dan mengklik/tap salah satu jaringan.
5. Hasil yang dapat diamati: Jaringan terpilih ditandai dengan 2px left edge amber; bezel arc amber menyapu di sekitar gauge-nya (400ms); panel READOUT menampilkan detail jaringan terpilih (nama, band, security, signal, last seen).
6. Langkah berikutnya: Pengguna melihat password kandidat di panel READOUT.

Flow 2: Melihat password kandidat dan generate ulang

1. Konteks awal: Pengguna telah memilih jaringan (Flow 1 selesai).
2. Aksi: Aplikasi menampilkan beberapa kemungkinan password yang digenerate otomatis sebagai numbered monospace lines dengan thin strength bar.
3. Hasil yang dapat diamati: Pengguna melihat daftar password kandidat dengan strength meter.
4. Aksi: Pengguna menekan tombol "GENERATE PASSWORD".
5. Hasil yang dapat diamati: Karakter password berkedip melalui random charset dan terkunci kiri-ke-kanan (250ms); strength meter berkedip teal (120ms); password kandidat baru ditampilkan.
6. Langkah berikutnya: Pengguna dapat menekan generate lagi untuk variasi lain, atau memilih jaringan lain.

Flow 3: Scan ulang daftar jaringan

1. Konteks awal: Pengguna berada di halaman Landing.
2. Aksi: Pengguna menekan keycap "SCAN ULANG".
3. Hasil yang dapat diamati: Daftar jaringan dummy dimuat ulang; numeral penghitung dan gauge menyapu ulang.
4. Langkah berikutnya: Pengguna dapat memilih jaringan dari daftar yang diperbarui.

Flow 4: Mengganti jaringan terpilih

1. Konteks awal: Pengguna telah memilih satu jaringan dan melihat password kandidat.
2. Aksi: Pengguna mengklik/tap jaringan lain di daftar.
3. Hasil yang dapat diamati: Jaringan baru ditandai amber; panel READOUT diperbarui dengan detail dan password kandidat untuk jaringan baru.
4. Langkah berikutnya: Pengguna dapat menekan generate untuk password baru.

6. Visuals Colors and Theme

Muse: MARQ by Garmin (luxury instrument aesthetic). Headline: Precision instrument readout for a signal-scanning utility.

Palette (dark mode):

• Background: #0B0D0F
• Surface: #16191D
• Raised rows: #1F2429
• Text (body): #E8E6E1
• Text (numerals): #FFFFFF
• Primary (amber): #C9A227
• Accent (teal): #3FBFB0
• Muted: #6E747C
• Hairlines: #2A2F35 at 1px

Typography:

• Headings dan data: Saira Condensed weight 600–700, uppercase, tracking +0.06em, line-height 0.95.
• Body: Barlow 400/500, normal case, line-height 1.5.
• Labels: Barlow 600 uppercase, 11–12px, tracking +0.14em.
• Scale (1.25 modular, 4pt baseline): display clamp(2.75rem, 7vw, 6rem); h2 22/28; row-title 20/24; body 15/16; label 11/12; mono-numeral readout 32 mobile → 56 desktop.

Shape language:

• Radii: 4px pada panel; 999px hanya pada circular signal gauge dan status dot.
• Network row: ruled panel dengan 1px #2A2F35 hairline dan 2px left edge yang menyala amber saat terpilih.
• Selected network: full circular bezel ring amber di sekitar signal gauge.
• Buttons: squared keycaps dengan 1px inset top highlight dan 2px bottom edge shadow yang tertekan 1px saat press.
• Tidak ada blob shapes, soft offset shadows, atau glass blur.

Spacing rhythm: 4pt baseline; panel padding 16–24px; row padding 12–16px.

Imagery style:

• Procedural CSS/SVG circular signal gauge per network (concentric arcs, tick marks, needle).
• Topographic contour line pattern sebagai background texture di belakang readout panel (#3FBFB0 at 4% opacity).
• Brushed-metal noise pada panel headers; fine dot-grid pada scan header.
• Lock/shield glyphs: thin 1.5px stroke pictograms.
• Macro-style crop contour texture bleeding off top-right hero, low contrast, never over text.

7. Signature Design Concept

Konsep: Console header sebagai instrumen, bukan hero marketing.

Elemen:

• Full-bleed dark graphite band (#0B0D0F) across viewport.
• Single oversized Saira Condensed line — "JARINGAN DI SEKITAR" — set flush-left at clamp(2.75rem, 7vw, 6rem), spanning ~9 of 12 columns, stacked in two tight lines dengan baris kedua di-indent satu kolom (seperti engraved dial legend).
• Di bawah headline, pinned left: compact scan-status strip dengan live-counting numeral ("07" networks found), pulsing teal status dot, dan keycap "SCAN ULANG".
• Di kanan headline, bleeding off right edge: large circular signal gauge (240–360px) dalam amber dengan tick marks dan needle at rest, cropped by edge.
• Dominant element adalah type; palette roles: ground #0B0D0F, text #E8E6E1, amber #C9A227 pada gauge dan active row only.
• Below fold edge: first two ruled network rows peek in, sehingga instrumen terasa sudah berjalan.

Signature moves:

• Flush-left, two-line condensed display headline dengan second line indented one column.
• Setiap network adalah ruled data row (bukan floating card): 1px hairline panel, tabular Saira numerals, small SVG circular gauge dengan tick marks, 2px left edge amber on selection, amber bezel arc sweep.
• Dedicated READOUT panel seperti instrument face: selected network's name engraved in condensed caps, aligned label/value metadata rows, generated passwords as numbered monospace lines dengan thin strength bar.
• Password generation sebagai character scramble: candidate strings flicker through random charset dan lock left-to-right over 250ms dengan 120ms teal flash on strength meter.
• Keycap buttons dan live-counting status numeral di scan strip.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: dimensional_css

Landing Hero Motion Brief

Focal subject: Circular signal gauge (amber, 240–360px) bleeding off the right edge, dengan tick marks dan needle at rest.

Input → Transformation → Outcome thesis: Saat halaman dimuat, gauge menyapu dari 0 ke nilai akhir (600ms dengan slight overshoot settle), numeral menghitung naik dalam tabular digits, dan ruled network rows muncul di bawah fold edge — mengubah layar kosong menjadi instrumen yang sudah berjalan.

Motion vocabulary: Needle-sweep precise; mechanical; never playful. Gauge sweep 600ms dengan overshoot settle; row numerals count up; selection animates amber bezel arc (400ms) dan readout panel slide-in (320ms ease-out); password generation scramble 250ms dengan 120ms teal flash.

Composed first frame: Full-bleed graphite band dengan headline "JARINGAN / DI SEKITAR" flush-left, scan-status strip dengan numeral dan teal dot, gauge amber cropped at right edge, dan dua ruled network rows peeking below fold.

Reduced-motion state: Gauges render at final value; readout appears without sliding; password generation swaps instantly dengan static teal highlight.

9. Non-Functional Requirements

NFR-1: Teknologi client-side murni

• Aplikasi harus dibangun hanya dengan HTML, CSS, dan JavaScript.
• Provenance: explicit
• Rationale: Constraint keras dari pengguna.

NFR-2: Data dummy/simulasi

• Data jaringan WiFi harus berupa data/simulasi dummy, bukan pemindaian jaringan nyata.
• Provenance: explicit
• Rationale: Constraint keras dari pengguna.

NFR-3: Password simulasi

• Password yang ditampilkan adalah hasil simulasi/generate otomatis, bukan password asli.
• Provenance: explicit
• Rationale: Constraint keras dari pengguna.

NFR-4: Responsive

• Layout harus responsive dan dapat dipakai di HP (375px) dan desktop (1280px).
• Provenance: explicit
• Rationale: Constraint desain dari pengguna.

NFR-5: Readable text and controls stay whole

• Headlines, labels, numbers, dan controls harus tetap utuh di dalam viewport dan container pada 375px, 768px, dan 1280px.
• Provenance: explicit (creative direction)
• Rationale: Aturan keterbacaan dari creative direction.

NFR-6: Reduced motion support

• Under prefers-reduced-motion, gauges render at final value, readout appears without sliding, dan password generation swaps instantly dengan static teal highlight.
• Provenance: explicit (creative direction)
• Rationale: Aksesibilitas.

10. Tech Stack

• HTML — struktur halaman.
• CSS — styling, layout responsive, animasi.
• JavaScript — logika aplikasi: data dummy, pemilihan jaringan, generate password, scan ulang.
• Tanpa backend — tidak ada server, API, atau database.
• Tanpa framework — aplikasi sederhana berbasis vanilla HTML/CSS/JS.

11. Assumptions and Constraints

Assumptions:

• Aplikasi dijalankan sebagai file statis di browser (dapat dibuka langsung atau via static hosting sederhana).
• Data jaringan WiFi dummy di-hardcode di dalam JavaScript.
• Generate password menggunakan random charset di sisi client.
• Tidak ada persistensi state antar sesi (tidak ada localStorage yang diperlukan).

Constraints:

• Hanya HTML, CSS, dan JavaScript — tidak ada backend, framework, atau library eksternal.
• Data jaringan harus dummy/simulasi.
• Password harus hasil simulasi, bukan password asli.
• Desain modern dan simpel dengan card layout responsive.
• Tidak ada fitur di luar yang tercantum dalam requirements.

12. Glossary

• Jaringan WiFi (dummy): Entri jaringan WiFi simulasi yang ditampilkan di daftar, dengan nama, band, signal strength, security type, dan last seen.
• Signal Gauge: Visualisasi circular SVG yang menampilkan kekuatan sinyal jaringan dengan tick marks dan needle.
• Readout Panel: Panel instrumen yang menampilkan detail jaringan terpilih dan daftar password kandidat.
• Password Kandidat: String password simulasi yang digenerate otomatis, ditampilkan sebagai numbered monospace line dengan strength bar.
• Generate Password: Aksi untuk membuat password kandidat baru melalui tombol "GENERATE PASSWORD".
• Scan Ulang: Aksi untuk memuat ulang daftar jaringan dummy melalui keycap "SCAN ULANG".
• Ruled Data Row: Baris data jaringan dengan 1px hairline panel dan 2px left edge yang menyala amber saat terpilih.
• Keycap Button: Tombol bergaya keycap instrumen dengan inset top highlight dan bottom edge shadow.