System Requirements Document for valorax-akun-gmail

1. Introduction

VALORAX is a modern web application presented as a platform for automatically and safely creating official Gmail accounts. It is delivered as a single-file, browser-ready web experience (HTML5 + Tailwind CSS via CDN + inline vanilla JavaScript) that walks a user through entering identity details, generating a strong password and username suggestions, producing a ready-to-use account credential set, and storing or exporting that credential set.

The product intent is a luxurious, high-tech "account forge": a dark cyberpunk instrument panel where accounts are generated with ceremony and visible instrumentation rather than through a plain form. The audience is freelancers, growth and side-project builders, and small agencies managing many identities, plus a curious Indonesian-language audience. The interface is Indonesian/English bilingual in its key copy (English tagline, Indonesian sub-tagline and FAQ answers).

The application uses a mock API for account creation and manual account creation; it does not integrate with Google's real provisioning systems. A mandatory disclaimer states that mass Gmail account creation without Google's permission violates Google's Terms of Service and that the tool is to be used only for legal and ethical purposes.

2. System Overview

VALORAX is a client-side web application with the following current delivery shape:

• Delivery: Single-file web app, ready to open in a browser. All styling via Tailwind CSS CDN; all JavaScript inline. A separate React component structure is an accepted alternative only if explicitly requested.
• Theme: Dark mode only — dark is the default and the exclusive mode.
• Account creation: Executed through a mock API with manual account creation. No real Google integration.
• Identity: The application owns user identity. Self-service enrollment (Sign Up) and returning verification (Login) are required so that generated accounts, dashboard inventory, bulk workflows, and encrypted vault records remain bound to the correct user across sessions.
• Storage: Generated account credentials are stored encrypted (AES-256) in the Secure Vault.
• Plan gating: Bulk generation of 100+ accounts is a Pro-tier capability; plan limits (FREE 3/day, PRO 50/day, ELITE unlimited, ENTERPRISE custom) govern generation capacity.

2a. Product Interpretation and Delivery Boundary

VALORAX is delivered as a first-party web application with application-owned identity. The public entry surface (HERO SECTION) and the informational surfaces (FITUR UTAMA, PRICING, FAQ ACCORDION, FOOTER) are reachable without signing in. The working surfaces — GENERATOR FORM, HASIL GENERATE, DASHBOARD, Bulk Generator, and Secure Vault — require an established identity so that generated credentials and vault records remain bound to the correct user and can be resumed on return.

Account creation is performed by a mock API with manual account creation; the application does not provision real Gmail accounts and does not integrate with Google. The mandatory disclaimer is shown both in an initial modal and in the footer, and states that mass Gmail account creation without Google's permission violates Google's Terms of Service and that the tool is to be used only for legal and ethical purposes.

Current scope covers the hero, generator form, generated-result card, six feature cards, dashboard, pricing, FAQ, footer, bulk generation, secure vault, login, and sign-up. No future-horizon features are defined in the authoritative source; anything not listed here is out of current scope.

2b. Source Content Inventory

Not applicable — no reference directive with content_source authority was supplied.

2c. Page Content and Component Coverage

HERO SECTION

• Information/state: Large VALORAX wordmark with pulsing neon glow; tagline "Create Official Gmail Accounts — Fast, Safe, Automated"; sub-tagline "Buat akun Gmail resmi dalam hitungan detik"; live stats counters for Total akun dibuat, Success rate, and Active users.
• Primary actions: CTA "CREATE ACCOUNT" (neon cyan) and CTA "resmi akun real time" (outline gold).
• Supporting actions: Navigation to FITUR UTAMA, PRICING, FAQ ACCORDION, Login, and Sign Up.
• Domain entities: Live statistics (total accounts created, success rate, active users).
• Component responsibilities: Animated gradient wordmark; particle background; grid overlay; three circular HUD gauges with count-up numerals and needle sweeps; CTA buttons; initial disclaimer modal trigger.
• States: Loading (skeleton for gauges while stats load); empty (gauges show zero values); success (gauges populated with counted-up values); error (gauges fall back to last known or zero values with a toast); recovery (retry stats fetch).

FITUR UTAMA

• Information/state: Six feature cards — Instant Generation (account in 30 seconds), Strong Password (auto-generate 16+ characters), Smart Username (AI suggests unique and available usernames), Bulk Generator (100+ accounts at once, Pro), Secure Vault (credentials encrypted with AES-256), Real-time Check (live username availability check).
• Primary actions: Navigate to the relevant working surface from each card (e.g., Bulk Generator card to Bulk Generator, Secure Vault card to Secure Vault).
• Supporting actions: Scroll within the section; hover glow on each card.
• Domain entities: Feature descriptions; plan association for Bulk Generator (Pro).
• Component responsibilities: Six machined glass slabs with clipped corners and thin-line HUD glyphs; section heading; section number marker.
• States: Loading (skeleton cards); empty (not applicable — static content); success (cards rendered); error (fallback static text); recovery (re-render on reload).

GENERATOR FORM

• Information/state: Input fields — First Name & Last Name; Date of Birth (date picker); Gender (dropdown); Recovery Phone (optional); Recovery Email (optional); Password (auto-generate strong + strength meter); Username preference (auto-suggest 5 variations); Country/Region. Submit button "GENERATE GMAIL" with animated loading effect. Live preview card that updates as the user types.
• Primary actions: Fill fields; auto-generate password; request username suggestions; submit "GENERATE GMAIL".
• Supporting actions: Real-time validation on all fields; error messages with shake animation; success state with green checkmark; copy generated password to clipboard; select a username suggestion.
• Domain entities: First name, last name, date of birth, gender, recovery phone, recovery email, password, username preference, country/region, username suggestions, password strength.
• Component responsibilities: Ruled label/value field rows; date picker; gender dropdown; password field with strength meter; username suggestion list; live preview card; submit button with loading animation; validation message layer.
• States: Loading (skeleton on preview card; loading animation on submit); empty (fields blank, preview shows placeholder); success (green checkmark per field; preview populated); error (shake animation and inline error message per field); recovery (correct field and resubmit).

HASIL GENERATE

• Information/state: Email address [nama]@gmail.com with copy button; password with show/hide toggle; recovery info; status "✅ Account Ready"; QR code for mobile access.
• Primary actions: "Download as TXT"; "Copy All"; "Save to Vault".
• Supporting actions: Copy email address; toggle password visibility; scan QR code for mobile access.
• Domain entities: Generated email address, generated password, recovery info, account status, QR code payload.
• Component responsibilities: Output card as a dark code-well with typed-out artifacts in JetBrains Mono; copy button; show/hide toggle; QR code renderer; action buttons; status indicator.
• States: Loading (skeleton while generation completes); empty (no account generated yet — prompt to use GENERATOR FORM); success ("✅ Account Ready" with populated artifacts); error (generation failed — error toast and retry action); recovery (retry generation or return to GENERATOR FORM).

PRICING

• Information/state: FREE — 3 accounts/day, basic features; PRO — 50 accounts/day, bulk generator, vault (popular, neon glow); ELITE — Unlimited, API access, priority support (gold gradient); ENTERPRISE — Custom, white-label, SLA.
• Primary actions: Select a plan.
• Supporting actions: Compare plan features; navigate to Sign Up or Login to operate under a plan.
• Domain entities: Plan name, daily account limit, included features, popularity marker.
• Component responsibilities: Four plan slabs; PRO highlighted with neon glow; ELITE rendered with gold gradient; feature lists; selection control.
• States: Loading (skeleton plan cards); empty (not applicable — static content); success (plan selected confirmation); error (selection failed — toast); recovery (retry selection).

FAQ ACCORDION

• Information/state: Accordion items including "Apakah legal?" → "Ya, selama untuk keperluan pribadi/bisnis yang sah" and "Berapa lama prosesnya?" → "Rata-rata 30-60 detik per akun", plus additional FAQ items.
• Primary actions: Expand/collapse an FAQ item.
• Supporting actions: Navigate to related surfaces from answers where relevant.
• Domain entities: Question, answer.
• Component responsibilities: Accordion list; expand/collapse control; section heading.
• States: Loading (skeleton rows); empty (not applicable — static content); success (item expanded/collapsed); error (fallback static text); recovery (re-render on reload).

DASHBOARD

• Information/state: Table of created accounts with status Active / Pending / Verified; columns Email, Password (hidden), Created, Last Login, Actions. Export CSV, Filter, and Search controls.
• Primary actions: Export CSV; filter; search; perform row actions.
• Supporting actions: Reveal hidden password per row; sort by column; navigate to Secure Vault or HASIL GENERATE.
• Domain entities: Account email, password (hidden), created timestamp, last login timestamp, status, row actions.
• Component responsibilities: Edge-to-edge table with sticky header and monospace tabular numerals; status rings; search input; filter controls; export button; row action menu.
• States: Loading (skeleton rows); empty (no accounts yet — prompt to generate); success (rows populated); error (fetch failed — error toast and retry); recovery (retry fetch or adjust filters).

Bulk Generator

• Information/state: Bulk generation of 100+ accounts at once; Pro-tier requirement; progress and completion context for the batch.
• Primary actions: Configure and start a bulk generation run; review batch results.
• Supporting actions: Navigate to Secure Vault to store batch credentials; navigate to DASHBOARD to review generated accounts.
• Domain entities: Batch size, batch progress, batch results, plan eligibility.
• Component responsibilities: Batch configuration panel; progress indicator; results summary; plan-eligibility notice.
• States: Loading (skeleton while batch initializes); empty (no batch started); success (batch completed with results); error (batch failed — error toast and retry); recovery (retry batch or reduce batch size).

Secure Vault

• Information/state: Stored account credentials encrypted with AES-256; durable, revisitable credential records.
• Primary actions: Save credentials to vault; view stored credentials; reveal stored password.
• Supporting actions: Search stored credentials; navigate to DASHBOARD.
• Domain entities: Stored credential record (email, password, recovery info), encryption state.
• Component responsibilities: Vault list; concentric-ring vault seal; reveal control; save confirmation.
• States: Loading (skeleton list); empty (no stored credentials — prompt to save from HASIL GENERATE); success (credential saved and listed); error (save or load failed — error toast and retry); recovery (retry save or load).

FOOTER

• Information/state: Multi-column layout with disclaimer and social icons. Disclaimer text: "VALORAX adalah tools untuk generate data real resmi. Pembuatan akun Gmail massal tanpa izin Google melanggar ToS. Gunakan hanya untuk keperluan legal & etis. Kami tidak bertanggung jawab atas penyalahgunaan."
• Primary actions: Navigate to footer links; open social icons.
• Supporting actions: Read disclaimer.
• Domain entities: Footer link groups, disclaimer text, social icon links.
• Component responsibilities: Multi-column layout; disclaimer block; social icon row.
• States: Loading (not applicable — static content); empty (not applicable); success (rendered); error (fallback static text); recovery (re-render on reload).

Login

• Information/state: Returning verification form for users with an existing VALORAX identity.
• Primary actions: Submit credentials to sign in.
• Supporting actions: Navigate to Sign Up.
• Domain entities: User identity, session.
• Component responsibilities: Credential fields; submit control; error message layer.
• States: Loading (submit in progress); empty (fields blank); success (signed in — redirect to intended protected surface); error (invalid credentials — inline error); recovery (retry or navigate to Sign Up).

Sign Up

• Information/state: First-use self-service enrollment form.
• Primary actions: Submit enrollment to create a VALORAX identity.
• Supporting actions: Navigate to Login.
• Domain entities: User identity, session.
• Component responsibilities: Enrollment fields; submit control; error message layer.
• States: Loading (submit in progress); empty (fields blank); success (identity created — redirect to intended protected surface); error (enrollment failed — inline error); recovery (retry or navigate to Login).

3. Functional Requirements

Each requirement is a distinct story point with provenance and observable acceptance.

FR-01 — Product identity and delivery (explicit) As a visitor, I should see VALORAX presented as a platform for automatically and safely creating official Gmail accounts, delivered as a single-file browser-ready web app with all styling via Tailwind CDN and all JavaScript inline, so that I can open it directly in a browser.

• Lifecycle: initiator = visitor; observable result = VALORAX loads in a browser; failure/recovery = reload; continuation = navigate to any surface.
• Acceptance: The app opens as a single file; styling is Tailwind CDN; JS is inline.

FR-02 — Visual identity (explicit) As a visitor, I should see a Futuristic Cyberpunk + Luxury Dark Theme with deep black background (#0A0A0F), purple-blue gradient mesh (#1A0033 → #000814), accents Neon Cyan (#00F0FF), Electric Purple (#B026FF), Gold (#FFD700), glassmorphism, neon glow, animated particle background, grid overlay, and a VALORAX logo as gradient text cyan→purple→gold with neon glow.

• Acceptance: All listed colors, effects, and the gradient logo are present.

FR-03 — Typography (explicit) As a visitor, I should see headings in Orbitron / Space Grotesk (bold uppercase), body in Inter / Sora, and monospace JetBrains Mono for email preview, loaded from Google Fonts.

• Acceptance: Fonts load from Google Fonts and are applied to the specified roles.

FR-04 — Hero section (explicit) As a visitor, I should see a large VALORAX logo with pulsing glow animation, the tagline "Create Official Gmail Accounts — Fast, Safe, Automated", the sub-tagline "Buat akun Gmail resmi dalam hitungan detik", CTA buttons "CREATE ACCOUNT" (neon cyan) and "resmi akun real time" (outline gold), and live stats counters for Total akun dibuat, Success rate, and Active users.

• Lifecycle: initiator = visitor; observable result = hero renders with animated logo, taglines, CTAs, and live counters; failure/recovery = reload; continuation = click a CTA.
• Acceptance: All hero elements render with the specified styling and live counters update.

FR-05 — Generator form fields (explicit) As an Account Creator, I should see a generator form with First Name & Last Name, Date of Birth (date picker), Gender (dropdown), Recovery Phone (optional), Recovery Email (optional), Password (auto-generate strong + strength meter), Username preference (auto-suggest 5 variations), and Country/Region, so that I can enter account details.

• Lifecycle: initiator = Account Creator; observable result = fields render and accept input; failure/recovery = inline validation; continuation = submit.
• Acceptance: All listed fields are present; Recovery Phone and Recovery Email are optional.

FR-06 — Generate Gmail submission (explicit) As an Account Creator, I should click "GENERATE GMAIL" with an animated loading effect to create an account.

• Lifecycle: initiator = Account Creator; observable result = loading animation then account creation via mock API; failure/recovery = error toast and retry; continuation = view HASIL GENERATE.
• Acceptance: Button triggers loading animation and account creation.

FR-07 — Output card (explicit) As an Account Creator, I should see an output card with email address [nama]@gmail.com (with copy button), password (show/hide toggle), recovery info, buttons "Download as TXT" / "Copy All" / "Save to Vault", a QR code for mobile access, and status "✅ Account Ready".

• Lifecycle: initiator = Account Creator; observable result = output card populated; failure/recovery = retry generation; continuation = copy, download, or save to vault.
• Acceptance: All listed elements render and function.

FR-08 — Six feature cards (explicit) As a visitor, I should see six feature cards: Instant Generation (account in 30 seconds), Strong Password (auto-generate 16+ characters), Smart Username (AI suggests unique and available usernames), Bulk Generator (100+ accounts at once, Pro), Secure Vault (credentials encrypted with AES-256), and Real-time Check (live username availability check).

• Acceptance: All six cards render with the specified content.

FR-09 — Dashboard table (explicit) As a Vault & Bulk Manager, I should see a table of created accounts with status Active / Pending / Verified and columns Email, Password (hidden), Created, Last Login, Actions, plus Export CSV, Filter, and Search.

• Lifecycle: initiator = Vault & Bulk Manager; observable result = table populated with accounts; failure/recovery = retry fetch; continuation = filter, search, export, or act on a row.
• Acceptance: Table renders with all columns and controls.

FR-10 — Pricing tiers (explicit) As a Plan Subscriber, I should see pricing tiers: FREE — 3 accounts/day, basic features; PRO — 50 accounts/day, bulk generator, vault (popular, neon glow); ELITE — Unlimited, API access, priority support (gold gradient); ENTERPRISE — Custom, white-label, SLA.

• Lifecycle: initiator = Plan Subscriber; observable result = tiers render; continuation = select a plan.
• Acceptance: All four tiers render with the specified limits and features.

FR-11 — FAQ accordion (explicit) As a visitor, I should see an FAQ accordion including "Apakah legal?" → "Ya, selama untuk keperluan pribadi/bisnis yang sah" and "Berapa lama prosesnya?" → "Rata-rata 30-60 detik per akun", plus additional FAQ items.

• Acceptance: Accordion renders with the specified Q&A and expands/collapses.

FR-12 — Footer (explicit) As a visitor, I should see a footer with a multi-column layout, disclaimer, and social icons.

• Acceptance: Footer renders with all listed elements.

FR-13 — Username generator (AI) (explicit) As an Account Creator, I should input a name to generate 10 unique username variations (e.g. johndoe → johndoe2024, john.doe, jdoe_official) and check availability via API.

• Lifecycle: initiator = Account Creator; observable result = 10 variations with availability; failure/recovery = retry; continuation = select a username.
• Acceptance: 10 variations are generated and availability is checked.

FR-14 — Password generator (explicit) As an Account Creator, I should generate a password of length 12-20 characters combining uppercase, lowercase, numbers, and symbols, with a visual strength meter (weak → strong) and auto-copy to clipboard.

• Lifecycle: initiator = Account Creator; observable result = password generated with strength meter; continuation = use or copy.
• Acceptance: Password length is 12-20; all character classes are included; strength meter renders; auto-copy works.

FR-15 — Form validation (explicit) As an Account Creator, I should see real-time validation of all fields, error messages with shake animation, and a success state with a green checkmark.

• Lifecycle: initiator = Account Creator; observable result = inline validation feedback; failure/recovery = correct field and resubmit.
• Acceptance: Validation is real-time; errors shake; success shows a green checkmark.

FR-16 — Data storage (explicit) As an Account Creator, I should have accounts saved in encrypted form.

• Lifecycle: initiator = Account Creator; observable result = account stored encrypted; failure/recovery = retry save; continuation = view in Secure Vault or DASHBOARD.
• Acceptance: Stored account data is encrypted.

FR-17 — UI components (explicit) As a visitor, I should see a custom cursor (dot + ring), toast notifications (success/error/info), modal dialog for confirmation, skeleton loading, and dark mode only (default and exclusive).

• Acceptance: All listed UI components are present; dark mode is the only mode.

FR-18 — Tech stack (explicit) As a developer, I should build with HTML5 + Tailwind CSS via CDN, Vanilla JavaScript (or React if requested), Google Fonts (Orbitron, Inter, JetBrains Mono), icons via Lucide / Font Awesome, animations via GSAP or CSS, QR code via qrcode.js, and fully responsive mobile-first layout.

• Acceptance: All listed technologies are used.

FR-19 — Mandatory disclaimer (explicit) As a visitor, I should see the disclaimer in the footer and in an initial modal: "VALORAX adalah tools untuk generate data real resmi. Pembuatan akun Gmail massal tanpa izin Google melanggar ToS. Gunakan hanya untuk keperluan legal & etis. Kami tidak bertanggung jawab atas penyalahgunaan."

• Lifecycle: initiator = visitor; observable result = modal on first load and disclaimer in footer; continuation = dismiss modal and continue.
• Acceptance: Exact wording appears in both locations.

FR-20 — Requested output (explicit) As a developer, I should deliver complete code as a single file ready to open in a browser (or separate React component structure if requested), with all styling via Tailwind CDN, all JS inline, and a mock API for account creation with manual account creation.

• Acceptance: Single-file delivery; Tailwind CDN; inline JS; mock API.

FR-21 — Priority (explicit) As a visitor, I should experience luxurious aesthetics, a high-tech impression, smooth UX, and impressive animations.

• Acceptance: The delivered experience reflects these priorities.

FR-22 — Self-service enrollment (required_inference) As a new user, I should be able to enroll myself on Sign Up so that I can independently start using VALORAX.

• Lifecycle: initiator = new user; observable result = identity created; failure/recovery = retry or navigate to Login; continuation = access protected surfaces.
• Acceptance: Sign Up creates an identity and grants access.

FR-23 — Returning verification (required_inference) As a returning user, I should verify my identity on Login before accessing protected generator, dashboard, bulk-generation, and vault workflows.

• Lifecycle: initiator = returning user; observable result = session established; failure/recovery = retry or navigate to Sign Up; continuation = access protected surfaces.
• Acceptance: Protected surfaces require verification.

FR-24 — Plan eligibility and Pro entitlement (required_inference) As a Vault & Bulk Manager, I should have my plan eligibility and Pro entitlement checked before running bulk generation.

• Lifecycle: initiator = Vault & Bulk Manager; observable result = eligibility confirmed or denied; failure/recovery = upgrade or reduce batch; continuation = run batch.
• Acceptance: Bulk generation is gated by Pro entitlement.

FR-25 — Encryption of stored credentials (required_inference) As an Account Creator, I should have stored account credentials encrypted in the Secure Vault.

• Lifecycle: initiator = Account Creator; observable result = credentials stored encrypted; failure/recovery = retry save; continuation = view in Secure Vault.
• Acceptance: Vault credentials are encrypted.

FR-26 — Mock API execution (required_inference) As an Account Creator, I should have manual account creation and bulk generation executed through a mock API.

• Lifecycle: initiator = Account Creator; observable result = mock API returns generated account data; failure/recovery = retry; continuation = view results.
• Acceptance: Mock API handles manual and bulk creation.

4. User Personas

Account Creator

• Product context: The primary user who fills the generator form and triggers "GENERATE GMAIL" to obtain a ready account. They work on the GENERATOR FORM and review results on HASIL GENERATE.
• Primary goal: Obtain a generated account credential set they can immediately use or store.
• Distinct accepted responsibilities: Entering First Name & Last Name, Date of Birth, Gender, optional Recovery Phone and Recovery Email, Password, Username preference, and Country/Region; generating a strong password; selecting from username suggestions; submitting the form; reviewing the output card; copying, downloading as TXT, copying all, or saving to vault.
• Relevant inputs or decisions: Identity details; password generation; username selection; whether to save to vault.
• Interactions with other accepted participants: Interacts with the mock API (system) for account creation; interacts with the Secure Vault to store credentials.
• Observable success: A generated account credential set with status "✅ Account Ready" that they can use or store.

Vault & Bulk Manager

• Product context: A user working at scale who runs bulk generation (100+ accounts on Pro) and manages the dashboard table of created accounts.
• Primary goal: Maintain an organized, exportable, searchable account inventory.
• Distinct accepted responsibilities: Running bulk generation; managing the dashboard table with status (Active/Pending/Verified); filtering, searching, and exporting CSV; relying on the secure vault to keep credentials stored encrypted.
• Relevant inputs or decisions: Batch size; filter and search criteria; export format; vault storage decisions.
• Interactions with other accepted participants: Interacts with the mock API (system) for bulk generation; interacts with the Secure Vault for credential storage.
• Observable success: An organized, exportable, searchable account inventory.

Plan Subscriber

• Product context: A user who evaluates and selects a plan tier to unlock the generation capacity and features they need.
• Primary goal: Choose and operate under the plan whose limits and features match their usage.
• Distinct accepted responsibilities: Evaluating FREE, PRO, ELITE, and ENTERPRISE tiers; selecting a plan; operating within plan limits.
• Relevant inputs or decisions: Plan comparison; selection.
• Interactions with other accepted participants: Interacts with the application to select a plan; interacts with Sign Up or Login to operate under a plan.
• Observable success: Operating under a plan whose limits and features match their usage.

5. Core User Flows

Flow 1 — Account Creator generates a single account

1. Account Creator opens VALORAX in a browser. The HERO SECTION renders with the animated VALORAX wordmark, tagline, sub-tagline, CTAs, and live stats gauges.
2. The initial disclaimer modal appears with the mandatory wording. Account Creator dismisses it and continues.
3. Account Creator clicks "CREATE ACCOUNT" (neon cyan) and is taken to the GENERATOR FORM (after verifying identity on Login if not already signed in).
4. Account Creator fills First Name & Last Name, Date of Birth (date picker), Gender (dropdown), optional Recovery Phone, optional Recovery Email, Country/Region, and Username preference.
5. Account Creator clicks the password auto-generate control. A password of 12-20 characters combining uppercase, lowercase, numbers, and symbols is generated with a visual strength meter (weak → strong) and auto-copied to clipboard.
6. Account Creator requests username suggestions. The username generator produces 10 unique variations (e.g. johndoe → johndoe2024, john.doe, jdoe_official) and checks availability via API. Account Creator selects one.
7. Real-time validation runs on all fields. Invalid fields show error messages with shake animation; valid fields show a green checkmark.
8. Account Creator clicks "GENERATE GMAIL". An animated loading effect plays while the mock API performs manual account creation.
9. HASIL GENERATE renders the output card: email address [nama]@gmail.com with copy button, password with show/hide toggle, recovery info, QR code for mobile access, and status "✅ Account Ready".
10. Account Creator uses "Download as TXT", "Copy All", or "Save to Vault". Saving to vault stores the credentials encrypted (AES-256).
11. Failure/recovery: If generation fails, an error toast appears and Account Creator retries from the GENERATOR FORM.
12. Continuation: Account Creator can view the account in DASHBOARD or Secure Vault.

Flow 2 — Vault & Bulk Manager runs bulk generation

1. Vault & Bulk Manager signs in on Login (or enrolls on Sign Up if new).
2. Vault & Bulk Manager opens Bulk Generator. Plan eligibility and Pro entitlement are checked.
3. If not on Pro, the manager is directed to PRICING to select PRO (50 accounts/day, bulk generator, vault).
4. Vault & Bulk Manager configures a batch of 100+ accounts and starts the run. The mock API executes bulk generation.
5. Progress and completion context are shown. On completion, batch results are summarized.
6. Vault & Bulk Manager saves batch credentials to Secure Vault (encrypted AES-256) and reviews generated accounts in DASHBOARD.
7. Failure/recovery: If the batch fails, an error toast appears and the manager retries or reduces batch size.
8. Continuation: Vault & Bulk Manager filters, searches, and exports CSV from DASHBOARD.

Flow 3 — Vault & Bulk Manager manages the dashboard

1. Vault & Bulk Manager signs in on Login.
2. DASHBOARD renders the table of created accounts with status Active / Pending / Verified and columns Email, Password (hidden), Created, Last Login, Actions.
3. Vault & Bulk Manager searches and filters the table.
4. Vault & Bulk Manager reveals a hidden password per row or performs a row action.
5. Vault & Bulk Manager exports CSV.
6. Failure/recovery: If the fetch fails, an error toast appears and the manager retries or adjusts filters.
7. Continuation: Vault & Bulk Manager navigates to Secure Vault or HASIL GENERATE.

Flow 4 — Plan Subscriber selects a plan

1. Plan Subscriber opens PRICING from the HERO SECTION or navigation.
2. Plan Subscriber compares FREE (3 accounts/day, basic features), PRO (50 accounts/day, bulk generator, vault, popular with neon glow), ELITE (Unlimited, API access, priority support, gold gradient), and ENTERPRISE (Custom, white-label, SLA).
3. Plan Subscriber selects a plan.
4. Failure/recovery: If selection fails, a toast appears and the subscriber retries.
5. Continuation: Plan Subscriber signs up or logs in to operate under the selected plan.

Flow 5 — Visitor reviews features and FAQ

1. Visitor opens VALORAX and dismisses the initial disclaimer modal.
2. Visitor navigates to FITUR UTAMA and reviews the six feature cards: Instant Generation (account in 30 seconds), Strong Password (auto-generate 16+ characters), Smart Username (AI suggests unique and available usernames), Bulk Generator (100+ accounts at once, Pro), Secure Vault (credentials encrypted with AES-256), Real-time Check (live username availability check).
3. Visitor navigates to FAQ ACCORDION and expands "Apakah legal?" → "Ya, selama untuk keperluan pribadi/bisnis yang sah" and "Berapa lama prosesnya?" → "Rata-rata 30-60 detik per akun", plus additional items.
4. Visitor reads the disclaimer in the FOOTER.
5. Continuation: Visitor clicks "CREATE ACCOUNT" to begin.

Flow 6 — New user enrolls and returning user verifies

1. New user opens Sign Up and submits enrollment. On success, an identity is created and the user is redirected to the intended protected surface.
2. Failure/recovery: If enrollment fails, an inline error appears and the user retries or navigates to Login.
3. Returning user opens Login and submits credentials. On success, a session is established and the user accesses protected surfaces.
4. Failure/recovery: If credentials are invalid, an inline error appears and the user retries or navigates to Sign Up.
5. Continuation: The user proceeds to GENERATOR FORM, DASHBOARD, Bulk Generator, or Secure Vault.

6. Visuals Colors and Theme

Muse: Gleb Kuznetsov. Headline: Cinematic neon vault — a dark HUD where accounts are forged, not filled in.

Palette (dark mode):

• Background: #0A0A0F
• Surface: #12101C
• Text: #EAF6FF
• Primary: #00F0FF
• Accent: #FFD700
• Muted: #8A86A8
• Gradient mesh: #1A0033 (violet) bleeding into #000814 (navy), fixed radial, low opacity
• Glass panels: #12101C at 55-70% opacity with a 1px rgba(0,240,255,0.18) edge and blurred backdrop
• Electric Purple #B026FF as secondary glow: section dividers, hover halos, middle stop of the logo gradient, particle hue variance
• Gold #FFD700 used sparingly at ~5% of surface: ELITE tier, verified status pips, right stop of the logo gradient, "Save to Vault" confirm state
• Never put #00F0FF text on #FFD700 or vice versa. No blue-indigo primary anywhere.

Typography:

• Headings: Orbitron 700-900, uppercase, tracking +0.06em on short labels and -0.01em on the hero wordmark; Space Grotesk 500-700 as secondary heading face for section titles and card headings.
• Body: Sora 300-500 for all prose and form labels at 15-17px with 1.7 line-height.
• Monospace: JetBrains Mono 400-500 for every generated artifact — email addresses, passwords, recovery data, the dashboard table, HUD micro-labels.
• HUD micro-labels: JetBrains Mono 11px, uppercase, tracking +0.18em, in #8A86A8.
• Scale: 1.25 modular with a jump for display: 12 / 13 / 15 / 17 / 21 / 26 / 34 / 46 / 64 / 92px.
• Hero wordmark: clamp(52px, 13vw, 168px). Section headings: clamp(30px, 5vw, 56px). Card headings: 21-26px. Body: 15-17px. Mono artifacts: clamp(14px, 3.6vw, 20px).

Shape language: Thin luminous strokes and hard-edged glass slabs: 2px and 12px radii, never pill-soft. Every panel is a rectangle with one clipped corner (a 14px 45-degree notch on the top-right). Buttons are sharp rectangles with a 1px neon border and a 6px inner glow, plus a 3px cyan bar that grows along the bottom edge on hover. Circular HUD gauges for stats counters, concentric rings for the vault seal, hairline 1px grid lines at 8% opacity across dark sections. No drop-shadow blur on text, only coloured glow.

Layout: A single full-bleed dark stage with a persistent 1px grid overlay and a fixed left rail (56px on desktop, hidden on mobile) carrying rotated JetBrains Mono section markers. Hero is a full-viewport composition: the VALORAX wordmark is set enormous and left-aligned on a 9-column measure, with the particle canvas and a faint concentric-ring HUD behind it, the tagline and two CTAs pinned beneath the wordmark's baseline, and the live stats as three circular gauges floating to the right at 60% height. The generator is a two-column instrument panel — left 5 columns of fields as ruled label/value rows, right 7 columns the live preview card that updates as you type. Output, features, dashboard, pricing and FAQ follow as full-width bands separated by 1px cyan rules with mono section numbers (01–08). Dashboard table is edge-to-edge with sticky header and monospace tabular numerals. Mobile collapses to a single column with the rail removed and the gauges stacked as a horizontal scroll row.

Imagery: No stock photography and no people. The visual world is the interface itself plus one crafted real-time 3D subject in the hero: a slowly rotating glass-and-neon vault core — a faceted torus with an inner cyan filament and gold specular highlight — rendered in Three.js at low poly count, sitting behind the wordmark and responding to pointer position with a damped rotation. Supporting imagery is procedural: particle fields derived from the account-counter data, concentric HUD rings, topographic line clusters, and a QR code rendered in cyan-on-black. Feature cards carry thin-line HUD glyphs (a 1px-stroke lightning bolt, key, crosshair, stack, shield, checkmark) rather than illustrations.

7. Signature Design Concept

The public entry is a full-bleed dark stage, not a centred SaaS stack. The VALORAX wordmark is set in Orbitron 900 uppercase at clamp(52px, 13vw, 168px), left-aligned on a 9-column measure, filled with a cyan→purple→gold gradient (#00F0FF → #B026FF → #FFD700) and a pulsing 40px neon glow on a 4s cycle. Behind and slightly right of it sits the WebGL vault core — a faceted glass torus with a cyan inner filament and a gold specular rim — rotating slowly and tilting toward the cursor, over a drifting particle field and a 1px grid at 8% opacity. The tagline "Create Official Gmail Accounts — Fast, Safe, Automated" sits directly under the wordmark's baseline in Sora 300 at 21px, with the Indonesian sub-tagline beneath it in #8A86A8. Two CTAs are pinned under that, left-aligned, not centred: "CREATE ACCOUNT" as a solid cyan-edged rectangle with a 6px inner glow, and "resmi akun real time" as a gold 1px outline rectangle. To the right at 60% viewport height, three circular HUD gauges (Total accounts, Success rate, Active users) float as glass discs with monospace numerals counting up once on load. A rotated JetBrains Mono "VALORAX // ACCOUNT FORGE" marker runs up the far-left rail. Nothing is centred, nothing is a gradient blob.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

• Focal subject: The VALORAX wordmark as a viewport-spanning Orbitron 900 gradient wordmark (cyan→purple→gold) with a 4s pulsing neon glow, left-aligned on a 9-column measure over a WebGL glass torus vault core.
• Input → transformation → outcome thesis: Pointer movement over the hero → the glass torus vault core tilts with damped rotation and the particle field drifts at 0.15px/frame → the wordmark glow pulses on a 4s ease-in-out cycle while the three HUD gauges count up once on entry over 1.2s with a needle sweep.
• Motion vocabulary: Slow-drifting particle canvas (max 120 particles, cyan-to-purple hue variance, 0.15px/frame); wordmark glow pulsing on a 4s ease-in-out cycle; scroll-linked parallax where the grid overlay moves at 0.4x and the particle field at 0.15x; section entrances as 600ms staggered reveals with a 1px cyan line sweeping in from the left before content fades up; numbers in stats gauges count up once on entry over 1.2s with a needle sweep; generated artifacts type themselves out at 28ms/character in JetBrains Mono with a blinking caret; hover on any panel raises its edge glow from 18% to 45% opacity over 180ms.
• Composed first frame: Full-bleed dark stage; the enormous left-aligned gradient wordmark with its pulsing glow; the glass torus vault core behind and slightly right; the tagline and Indonesian sub-tagline beneath the baseline; the two CTAs pinned left-aligned; the three circular HUD gauges floating right at 60% height; the rotated "VALORAX // ACCOUNT FORGE" marker on the far-left rail; the 1px grid at 8% opacity.
• Reduced-motion state: Every loop stops and every reveal resolves to its final state under prefers-reduced-motion. The particle field and torus rotation stop; the wordmark glow holds at its resting intensity; the gauges show their final counted-up values; the grid overlay holds still.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

A single crafted real-time object: a faceted glass torus vault core with an inner cyan filament and a gold specular rim, rendered in Three.js at low poly count. It rotates slowly and tilts toward the cursor with damped rotation, sitting behind the wordmark over the drifting particle field. The scene shows the product's defining state — a sealed, glowing instrument that forges accounts — and responds to pointer position without introducing any new behaviour.

9. Non-Functional Requirements

• NFR-01 — Dark mode only (explicit): Dark theme is the default and the only mode. Rationale: explicit hard constraint.
• NFR-02 — Optional recovery fields (explicit): Recovery Phone and Recovery Email fields are optional. Rationale: explicit hard constraint.
• NFR-03 — Bulk Generator is Pro-tier (explicit): Bulk Generator of 100+ accounts at once is a Pro-tier feature. Rationale: explicit hard constraint.
• NFR-04 — Plan limits (explicit): FREE 3 accounts/day with basic features; PRO 50 accounts/day with bulk generator and vault; ELITE unlimited with API access and priority support; ENTERPRISE custom with white-label and SLA. Rationale: explicit hard constraint.
• NFR-05 — AES-256 encryption (explicit): Secure Vault stores credentials encrypted with AES-256; stored account data must be encrypted. Rationale: explicit hard constraint.
• NFR-06 — Password length (explicit): Password length is constrained to 12-20 characters. Rationale: explicit hard constraint.
• NFR-07 — Mandatory disclaimer (explicit): The disclaimer must appear in the footer and in an initial modal, with the exact wording: "VALORAX adalah tools untuk generate data real resmi. Pembuatan akun Gmail massal tanpa izin Google melanggar ToS. Gunakan hanya untuk keperluan legal & etis. Kami tidak bertanggung jawab atas penyalahgunaan." Rationale: explicit hard constraint.
• NFR-08 — Mock API (explicit): Account creation uses a mock API with manual account creation. Rationale: explicit hard constraint.
• NFR-09 — Single-file delivery (explicit): Output must be a single file ready to open in a browser (or separate React components if requested), with all styling via Tailwind CDN and all JS inline. Rationale: explicit hard constraint.
• NFR-10 — Responsive (explicit): Fully responsive, mobile-first. Rationale: explicit hard constraint.
• NFR-11 — Disclaimer content (explicit): The disclaimer states that mass Gmail account creation without Google's permission violates Google's ToS and that the tool is to be used only for legal and ethical purposes. Rationale: explicit hard constraint.
• NFR-12 — Readable text and controls stay whole (direction): Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit; no other element covers any part of them. Rationale: creative direction readability rule.
• NFR-13 — Reduced motion (direction): Every loop stops and every reveal resolves to its final state under prefers-reduced-motion. Rationale: creative direction motion rule.

10. Tech Stack

• HTML5 — single-file delivery.
• Tailwind CSS via CDN — all styling.
• Vanilla JavaScript — all JS inline (React only if explicitly requested).
• Google Fonts — Orbitron, Inter, JetBrains Mono (plus Space Grotesk and Sora per the creative direction).
• Icons — Lucide / Font Awesome.
• Animations — GSAP or CSS animations.
• QR Code — qrcode.js library.
• 3D hero — Three.js / React Three Fiber for the WebGL vault core (per the creative direction's webgl hero dimensionality).
• Mock API — for manual account creation and bulk generation.
• Storage — client-side encrypted storage for the Secure Vault (AES-256).
• Responsive — mobile-first.

11. Assumptions and Constraints

• A-01 (assumption): The application uses a mock API for account creation and does not integrate with Google's real provisioning systems.
• A-02 (assumption): Application-owned identity is required so that generated accounts, dashboard inventory, bulk workflows, and encrypted vault records remain bound to the correct user across sessions.
• A-03 (assumption): Self-service enrollment (Sign Up) and returning verification (Login) are the chosen identity bootstrap because the source establishes no invitation, provisioning, or pre-existing-account boundary.
• A-04 (assumption): Bulk generation is gated by Pro entitlement; plan eligibility is checked before a batch runs.
• A-05 (assumption): Secure Vault credentials are encrypted with AES-256.
• C-01 (constraint): Dark mode only — dark is the default and the exclusive mode.
• C-02 (constraint): Recovery Phone and Recovery Email are optional.
• C-03 (constraint): Bulk Generator of 100+ accounts at once is a Pro-tier feature.
• C-04 (constraint): Plan limits: FREE 3 accounts/day; PRO 50 accounts/day; ELITE unlimited; ENTERPRISE custom.
• C-05 (constraint): Password length is 12-20 characters.
• C-06 (constraint): The mandatory disclaimer must appear in the footer and in an initial modal with the exact wording.
• C-07 (constraint): Account creation uses a mock API with manual account creation.
• C-08 (constraint): Output must be a single file ready to open in a browser, with all styling via Tailwind CDN and all JS inline.
• C-09 (constraint): Fully responsive, mobile-first.
• C-10 (constraint): The disclaimer states that mass Gmail account creation without Google's permission violates Google's ToS and that the tool is to be used only for legal and ethical purposes.

12. Glossary

• VALORAX — The product name; a web application presented as a platform for automatically and safely creating official Gmail accounts.
• Account Creator — The primary persona who fills the generator form and triggers "GENERATE GMAIL".
• Vault & Bulk Manager — The persona who runs bulk generation and manages the dashboard inventory.
• Plan Subscriber — The persona who evaluates and selects a plan tier.
• GENERATOR FORM — The main section where account details are entered and account creation is triggered.
• HASIL GENERATE — The output card showing the generated account credentials.
• Secure Vault — The encrypted credential storage destination (AES-256).
• Bulk Generator — The Pro-tier workflow for generating 100+ accounts at once.
• DASHBOARD — The account inventory table with statuses, search, filter, and CSV export.
• Mock API — The simulated account-creation backend used for manual and bulk creation.
• HUD gauge — A circular instrument-style stat display with count-up numerals and needle sweep.
• Glass slab — A machined glass panel with a clipped corner and a 1px cyan edge.
• Disclaimer — The mandatory legal notice shown in the footer and in an initial modal.