System Requirements Document for warung-nenek-uka

1. Introduction

This document specifies the official website for WARUNG NENEK UKA (WNU CLUB), an Indonesian eSport team whose competitive division plays Flash Peak. The site is the team's public identity surface: it presents the WNU CLUB brand, the full Flash Peak roster with names, nicknames and UIDs, the team's official TikTok presence, and the route by which prospective members reach the team admin on WhatsApp.

The product intent is a single, self-contained, publicly reachable team website built with HTML, CSS, and JavaScript, carrying a modern, bold, competitive eSport character derived from the WNU CLUB logo palette (Biru Dongker / Navy Blue, Black, Gold / Orange) with visual effects reminiscent of the Flash Peak game. The audience is fans and prospective recruits — young mobile players and clan recruits arriving from TikTok and WhatsApp — who want to see who plays for WNU CLUB and how to join the Flash Peak division.

The site is informational and outbound. It publishes roster facts and contact routes; it does not host accounts, logins, payments, or member data entry. Registration itself happens in WhatsApp, owned by WhatsApp and the team admin.

2. System Overview

The current delivery is a static, multi-page public website for WNU CLUB, authored in HTML, CSS, and JavaScript, with five navigable destinations: Home, Roster, TikTok, Join Us, and Contact. All five are publicly reachable with no account, sign-in, or identity requirement.

Actors:

• Team Visitor / Prospective Member — the public visitor who reads the team identity, browses the Flash Peak roster, follows the TikTok link, and starts a WhatsApp conversation with the admin to register.
• Team Admin — the published contact point who receives WhatsApp inquiries from prospective members and fans at +62 831-8346-8485.
• WhatsApp (external provider) — owns the conversation surface that opens from the site's WhatsApp links, including the prefilled registration message.
• TikTok (external provider) — owns the official WNU CLUB profile that the site links to.

Accepted behavior covers: the header with the WNU CLUB logo and the five-item navigation; the hero with the main title, the tagline "Dominate the Peak, Powered by Family.", and the two call-to-action buttons; the Flash Peak roster of nine interactive player cards with gold/navy frames and placeholder photos; the community/TikTok section with the official account name, invitation text, and profile button; the Join Us section with its invitation text, admin number, and prefilled-message WhatsApp button; and the footer with contact information and the 2026 copyright line.

Narrow exclusions: the roster is limited to the Flash Peak division and exactly the nine listed members; no other division, no member self-service editing, no account system, no payment, and no on-site registration form are part of this delivery. Registration is completed in WhatsApp, not on the site.

2a. Product Interpretation and Delivery Boundary

The website is a first-party, publicly accessible brand and roster surface. Every destination is anonymous and open: a visitor arriving from TikTok, WhatsApp, or a search result can read the roster and reach the admin without creating an account. No application-owned identity, login, or session continuity is required or introduced, because the site holds no private per-visitor state, no commitment bound to a named user, and no value transfer that must be attributed to a specific account.

Two responsibilities are deliberately owned outside the site. The registration conversation is owned by WhatsApp: the site's job ends when it hands the visitor to https://wa.me/6283183468485 with the accepted prefilled message, and the admin's reply, screening, and any roster decision happen in that conversation. The TikTok content is owned by TikTok: the site links to the official WNU CLUB profile and does not embed, mirror, or re-host the team's videos.

Current horizon: the five pages, the nine roster entries, the two WhatsApp routes, the TikTok route, and the footer as specified. Future horizon: nothing beyond this scope is committed; any additional division, content type, or interactive member feature would be a new requirement.

2b. Source Content Inventory

The following verified facts are published content of the site and must appear exactly as given.

Team identity

• Team name: WARUNG NENEK UKA (WNU CLUB)
• Tagline: "Dominate the Peak, Powered by Family."
• Division: Flash Peak
• Logo: WARUNG NENEK UKA (WNU CLUB) logo image, used in the header (placeholder permitted if no supplied asset)

Flash Peak roster (nine members, in this order)

Member 8's UID is published as "-" exactly as supplied.

Contact and channel facts

• Admin WhatsApp number: +62 831-8346-8485
• WhatsApp link target: https://wa.me/6283183468485
• Join Us prefilled message: "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak."
• Official TikTok account name: WNU CLUB
• TikTok invitation text: "Ikuti keseruan mabar, highlight pertandingan, dan konten seru tim WNU CLUB di TikTok!"
• Join Us invitation text: "Ingin bergabung menjadi bagian dari divisi Flash Peak WNU CLUB? Hubungi Admin kami sekarang!"
• Footer contact line: Admin WhatsApp +62 831-8346-8485 | TikTok: WNU CLUB
• Copyright: "© 2026 WARUNG NENEK UKA (WNU CLUB). All Rights Reserved."

Navigation labels (exact): Home, Roster, TikTok, Join Us, Contact

Hero call-to-action labels (exact): "Bergabung via WhatsApp", "Kunjungi TikTok Kami"

Join Us button label (exact): "Hubungi Admin via WhatsApp (+62 831-8346-8485)"

2c. Page Content and Component Coverage

Home

• Information and state: the public entry surface. Presents the WNU CLUB identity, the hero title "WARUNG NENEK UKA (WNU CLUB)", the tagline "Dominate the Peak, Powered by Family.", and the two primary calls to action. No user-specific state; the page is identical for every visitor.
• Primary actions: "Bergabung via WhatsApp" → opens https://wa.me/6283183468485; "Kunjungi TikTok Kami" → opens the official WNU CLUB TikTok profile.
• Supporting actions: header navigation to Roster, TikTok, Join Us, Contact; logo returns to Home.
• Domain entities: Team identity (name, tagline, division), navigation item, call-to-action link.
• Component responsibilities: HeaderNav (logo image with alt text, five navigation links, active-page indication); HeroBlock (main title, tagline, CTA row); HeroEmblem (decorative instrument emblem, non-interactive, hidden from assistive technology); SectionRule (numbered section headers with gold hairline); Footer (contact line and copyright).
• States: Loading — static markup, no data fetch; the hero renders immediately. Empty — not applicable; hero content is fixed. Success — title, tagline, and both CTAs visible and keyboard reachable. Error — if the logo asset fails to load, the alt text "WARUNG NENEK UKA (WNU CLUB)" renders in its place and layout does not collapse. Recovery — a visitor whose WhatsApp or TikTok link does not open can use the same destinations from the Join Us and Contact pages.

Roster

• Information and state: the Flash Peak division roster. Nine interactive player cards, each showing a placeholder photo inside a gold/navy frame, the nickname, the UID, the full name, and the Captain role tag on member 1. Member 8 shows UID "-".
• Primary actions: selecting a player card reveals that member's full details (name, nickname, UID, role where present).
• Supporting actions: header navigation; footer contact routes.
• Domain entities: Player (nama, nickname, UID, role, photo placeholder), Division (Flash Peak).
• Component responsibilities: RosterGrid (3-up at 1280px, 2-up at 768px, 1-up at 375px); PlayerCard (gold/navy bezel frame, circular avatar gauge with placeholder silhouette, nickname, ruled UID row, name, role tag); CaptainBadge (role tag on member 1 only); RosterTicker (telemetry strip of nicknames and UIDs above the section, pausing on hover); SectionRule ("01 ROSTER").
• States: Loading — cards render from static markup; the bezel arc and UID count-up animate on scroll-in. Empty — not applicable; the roster is a fixed list of nine. Success — all nine cards render with correct nickname, UID, and name; member 1 carries the Captain tag; member 8 shows "-". Error — if a placeholder image fails, the gauge ring and nickname still render and the card remains readable. Recovery — a visitor who cannot expand a card still reads nickname, UID, name, and role directly on the card face.

TikTok

• Information and state: the community surface. Shows the official account name "WNU CLUB", the invitation text "Ikuti keseruan mabar, highlight pertandingan, dan konten seru tim WNU CLUB di TikTok!", and the button to the official profile.
• Primary actions: "Kunjungi TikTok Kami" → opens the official WNU CLUB TikTok profile in a new context.
• Supporting actions: header navigation; footer contact routes.
• Domain entities: Social channel (platform: TikTok, account name: WNU CLUB, profile URL).
• Component responsibilities: TikTokPanel (account name, invitation text, profile button); PhoneFrame (decorative 9:16 crop with gold bezel edge, non-interactive); SectionRule ("02 TIKTOK").
• States: Loading — static; renders immediately. Empty — not applicable. Success — account name, invitation text, and profile button visible and keyboard reachable. Error — if the profile URL is not yet configured, the button renders disabled with a visible note that the profile link is being finalized, and the account name and invitation text remain readable. Recovery — the visitor can still reach the team through the Join Us or Contact WhatsApp route.

Join Us

• Information and state: the new-member registration surface. Shows the invitation text "Ingin bergabung menjadi bagian dari divisi Flash Peak WNU CLUB? Hubungi Admin kami sekarang!", the admin WhatsApp number +62 831-8346-8485, and the interactive registration button.
• Primary actions: "Hubungi Admin via WhatsApp (+62 831-8346-8485)" → opens a WhatsApp conversation to +62 831-8346-8485 with the prefilled draft message "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak."
• Supporting actions: header navigation; footer contact routes.
• Domain entities: Registration route (admin number, prefilled message, division: Flash Peak).
• Component responsibilities: JoinPanel (invitation text, published admin number, registration button); SectionRule ("03 JOIN US").
• States: Loading — static; renders immediately. Empty — not applicable. Success — the button opens WhatsApp with the number and the prefilled message intact. Error — if WhatsApp is not installed or the link cannot be handled, the visitor sees the published number +62 831-8346-8485 as selectable text and can start the conversation manually. Recovery — the same number and message are reachable from the Home hero CTA and the Contact page.

Contact

• Information and state: the contact surface. Exposes the published admin WhatsApp number +62 831-8346-8485, the TikTok identity "WNU CLUB", and the footer information including the copyright line "© 2026 WARUNG NENEK UKA (WNU CLUB). All Rights Reserved."
• Primary actions: open the WhatsApp conversation to the admin number; open the official WNU CLUB TikTok profile.
• Supporting actions: header navigation; footer contact line.
• Domain entities: Contact channel (WhatsApp number, TikTok account), Copyright notice.
• Component responsibilities: ContactPanel (WhatsApp number, TikTok identity, channel actions); Footer (contact line "Admin WhatsApp +62 831-8346-8485 | TikTok: WNU CLUB", copyright text); SectionRule ("04 CONTACT").
• States: Loading — static; renders immediately. Empty — not applicable. Success — both channels visible, selectable, and keyboard reachable; copyright renders exactly. Error — if a channel link fails to open, the number and account name remain visible as plain text for manual use. Recovery — the visitor can return to Join Us for the prefilled registration route.

3. Functional Requirements

FR-1 — Official team website delivery As a Team Visitor / Prospective Member, I should reach the official WARUNG NENEK UKA (WNU CLUB) eSport team website built with HTML, CSS, and JavaScript, so that I can see the team's identity, roster, and contact routes in one place.

• Provenance: explicit
• Lifecycle: trigger — the visitor opens the site URL; input — none; observable result — the site loads with the WNU CLUB identity and the five-item navigation; access state — anonymous, no account; failure/recovery — if a page fails to load, the visitor can retry or navigate to another of the five destinations; continuation — the visitor moves to Roster, TikTok, Join Us, or Contact.
• Acceptance: the site is served as HTML, CSS, and JavaScript; all five destinations are reachable from the header navigation.

FR-2 — WNU CLUB visual theme As a Team Visitor / Prospective Member, I should see a visual theme derived from the WNU CLUB logo — Navy Blue / Biru Dongker, Black, and Gold / Orange — with a modern, bold, competitive feel and Flash Peak-style visual effects, so that the team looks like a serious competitive squad.

• Provenance: explicit
• Lifecycle: trigger — any page render; input — the brand palette; observable result — navy/black grounds with gold and orange accents applied consistently across header, hero, cards, sections, and footer; access state — anonymous; failure/recovery — if a decorative effect does not render, the page remains fully readable and navigable; continuation — the visitor continues browsing.
• Acceptance: the four brand colors are present; no page falls back to an unrelated default palette; text remains legible against its background.

FR-3 — Header with logo and navigation As a Team Visitor / Prospective Member, I should see the WARUNG NENEK UKA (WNU CLUB) logo image and the navigation menu Home, Roster, TikTok, Join Us, Contact in the header, so that I can identify the team and move between destinations.

• Provenance: explicit
• Lifecycle: trigger — page load; input — logo asset and five navigation labels; observable result — the header renders with the logo and all five links; access state — anonymous; failure/recovery — if the logo image fails, its alt text renders and the navigation remains usable; continuation — selecting a link navigates to that destination.
• Acceptance: the logo image is present with alt text; exactly the five labels Home, Roster, TikTok, Join Us, Contact appear; each link is keyboard reachable.

FR-4 — Hero title and tagline As a Team Visitor / Prospective Member, I should see the main title "WARUNG NENEK UKA (WNU CLUB)" and the tagline "Dominate the Peak, Powered by Family." at the top of the main page, so that I immediately understand who the team is.

• Provenance: explicit
• Lifecycle: trigger — Home page load; input — fixed copy; observable result — title and tagline render at the top of the page; access state — anonymous; failure/recovery — not applicable to static copy; continuation — the visitor reads the calls to action below.
• Acceptance: both strings render exactly as specified.

FR-5 — Hero call-to-action buttons As a Team Visitor / Prospective Member, I should see the hero buttons "Bergabung via WhatsApp" linking directly to https://wa.me/6283183468485 and "Kunjungi TikTok Kami", so that I can immediately join or follow the team.

• Provenance: explicit
• Lifecycle: trigger — the visitor activates a hero button; input — the button label; observable result — the WhatsApp conversation to +62 831-8346-8485 opens, or the official WNU CLUB TikTok profile opens; access state — anonymous; failure/recovery — if the target app or site does not open, the visitor can use the Join Us or Contact page routes; continuation — the visitor proceeds in WhatsApp or TikTok.
• Acceptance: the WhatsApp button resolves to https://wa.me/6283183468485; the TikTok button resolves to the official WNU CLUB profile; both are keyboard reachable.

FR-6 — Flash Peak roster player cards As a Team Visitor / Prospective Member, I should see interactive player cards for the Flash Peak division with gold/navy blue frames and placeholder photos, so that I can browse the squad visually.

• Provenance: explicit
• Lifecycle: trigger — the visitor opens Roster; input — the nine-member roster data; observable result — nine cards render with frames and placeholder photos; access state — anonymous; failure/recovery — if a placeholder image fails, the card still shows nickname, UID, name, and role; continuation — the visitor selects a card to see details.
• Acceptance: nine cards render; frames use gold/navy blue; each card carries a placeholder photo; cards are interactive and keyboard reachable.

FR-7 — Roster member 1 (Captain) As a Team Visitor / Prospective Member, I should see member 1 as Nama ILHAMSYAH, Nickname WNU.Icaaaaa, UID 11561868, Role Captain, so that I know who leads the Flash Peak division.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; input — member 1 data; observable result — the card shows all four values with the Captain role tag; access state — anonymous; failure/recovery — the values remain readable even if the photo placeholder fails; continuation — the visitor continues to the next card.
• Acceptance: all four values render exactly; the Captain tag appears on this card.

FR-8 — Roster member 2 As a Team Visitor / Prospective Member, I should see member 2 as Nama Aditya Rizki Destiansyah, Nickname WNU.Mikk, UID 12299750.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly.

FR-9 — Roster member 3 As a Team Visitor / Prospective Member, I should see member 3 as Nama Abdullah Hilmi, Nickname WNU.Ω, UID 12759754.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID, including the Ω character; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly, with the Ω glyph intact.

FR-10 — Roster member 4 As a Team Visitor / Prospective Member, I should see member 4 as Nama Yudistira, Nickname WNU.CELIAA, UID 11829747.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly.

FR-11 — Roster member 5 As a Team Visitor / Prospective Member, I should see member 5 as Nama Rachmat Dava Rangga Wijaya, Nickname WNU.ZEUSs\xe2\x9a\x9c️, UID 11997056.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID, including the\x20\xe2\x9a\x9c️ character; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly, with the\x20\xe2\x9a\x9c️ glyph intact.

FR-12 — Roster member 6 As a Team Visitor / Prospective Member, I should see member 6 as Nama Muhammad Keysha Alvaro, Nickname WNU.Syakiraa, UID 11919263.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly.

FR-13 — Roster member 7 As a Team Visitor / Prospective Member, I should see member 7 as Nama Kawian Adi Pramana, Nickname WNU.Wyanz, UID 11700724.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: all three values render exactly.

FR-14 — Roster member 8 As a Team Visitor / Prospective Member, I should see member 8 as Nama Diki Ilham Setiawan, Nickname WNU.Gilang, UID "-".

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name and nickname, and the UID field displays "-" exactly as supplied; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — next card.
• Acceptance: the UID renders as "-" and is not replaced with a fabricated number or hidden.

FR-15 — Roster member 9 As a Team Visitor / Prospective Member, I should see member 9 as Nama ANGGA, Nickname WNU.Cacaa, UID 11561906.

• Provenance: explicit
• Lifecycle: trigger — Roster page load; observable result — the card shows the name, nickname, and UID; access state — anonymous; failure/recovery — values remain readable without the photo; continuation — the visitor reaches the end of the roster and can move to TikTok, Join Us, or Contact.
• Acceptance: all three values render exactly.

FR-16 — Community and TikTok section As a Team Visitor / Prospective Member, I should see the official TikTok account name WNU CLUB, the invitation text "Ikuti keseruan mabar, highlight pertandingan, dan konten seru tim WNU CLUB di TikTok!", and a button linking directly to the WNU CLUB TikTok profile, so that I can follow the team's content.

• Provenance: explicit
• Lifecycle: trigger — the visitor opens TikTok; input — the account name and invitation text; observable result — the section renders and the button opens the official profile; access state — anonymous; failure/recovery — if the profile URL is not yet configured, the button is disabled with a visible note and the account name and invitation text remain readable; continuation — the visitor browses the profile or returns to the site.
• Acceptance: the account name and invitation text render exactly; the button targets the official WNU CLUB profile and is keyboard reachable.

FR-17 — Join Us registration section As a Team Visitor / Prospective Member, I should see the invitation text "Ingin bergabung menjadi bagian dari divisi Flash Peak WNU CLUB? Hubungi Admin kami sekarang!", the admin WhatsApp number +62 831-8346-8485, and the interactive button "Hubungi Admin via WhatsApp (+62 831-8346-8485)" that opens a WhatsApp conversation to that number with the prefilled draft message "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak.", so that I can start my registration with the right context.

• Provenance: explicit
• Lifecycle: trigger — the visitor activates the registration button; input — the admin number and the prefilled message; observable result — WhatsApp opens a conversation to +62 831-8346-8485 with the draft message pre-filled and editable; access state — anonymous; failure/recovery — if WhatsApp cannot be opened, the number +62 831-8346-8485 is visible as selectable text for manual contact; continuation — the visitor sends the message and the Team Admin receives it.
• Acceptance: the invitation text and number render exactly; the button label reads exactly "Hubungi Admin via WhatsApp (+62 831-8346-8485)"; the opened conversation targets +62 831-8346-8485 with the exact prefilled message.

FR-18 — Admin receives registration inquiries As a Team Admin, I should receive WhatsApp inquiries from prospective members at +62 831-8346-8485 with the registration context already written, so that I can respond to recruits without asking them to repeat their intent.

• Provenance: required_inference
• Lifecycle: trigger — a visitor sends the prefilled message from Join Us or the Home hero; input — the incoming WhatsApp message; observable result — the inquiry arrives at the published admin number carrying the Flash Peak registration intent; access state — the admin's own WhatsApp account, outside the site; failure/recovery — if a visitor cannot open WhatsApp, the admin number is published on Join Us and Contact so the visitor can reach it another way; continuation — the admin replies in WhatsApp and the conversation continues there.
• Acceptance: the published number is +62 831-8346-8485 on Join Us, Contact, and the footer; the prefilled message identifies the Flash Peak division.

FR-19 — Footer contact and copyright As a Team Visitor / Prospective Member, I should see the footer contact information "Admin WhatsApp +62 831-8346-8485 | TikTok: WNU CLUB" and the copyright "© 2026 WARUNG NENEK UKA (WNU CLUB). All Rights Reserved.", so that I can confirm the team's official channels and ownership.

• Provenance: explicit
• Lifecycle: trigger — any page load; input — fixed footer copy; observable result — the contact line and copyright render on every page; access state — anonymous; failure/recovery — not applicable to static copy; continuation — the visitor uses the contact routes or leaves the site.
• Acceptance: both strings render exactly as specified on all five pages.

FR-20 — Anonymous public entry As a Team Visitor / Prospective Member, I should reach Home anonymously as the explanatory public entry before using the roster, TikTok, Join Us, or Contact destinations, so that I can understand the team before acting.

• Provenance: required_inference
• Lifecycle: trigger — the visitor opens the site root; input — none; observable result — Home renders with the identity, tagline, and both calls to action without any sign-in prompt; access state — anonymous, no account; failure/recovery — if the visitor lands directly on a deeper page, that page still renders fully and the header returns them to Home; continuation — the visitor chooses Roster, TikTok, Join Us, or Contact.
• Acceptance: no page requires an account; Home is reachable without credentials.

FR-21 — Official TikTok profile destination As a Team Visitor / Prospective Member, I should be taken to the official WNU CLUB TikTok profile from both the hero and the TikTok section, so that I always land on the team's real account.

• Provenance: required_inference
• Lifecycle: trigger — the visitor activates a TikTok link; input — the configured profile URL; observable result — the official WNU CLUB profile opens; access state — anonymous; failure/recovery — if the URL is not yet configured, the button is disabled with a visible note rather than pointing to a wrong account; continuation — the visitor follows or browses the profile.
• Acceptance: both TikTok entry points resolve to the same official WNU CLUB profile.

FR-22 — WhatsApp link targets As a Team Visitor / Prospective Member, I should have every WhatsApp link on the site target +62 831-8346-8485, with the accepted prefilled message where specified, so that I always reach the correct admin.

• Provenance: required_inference
• Lifecycle: trigger — the visitor activates any WhatsApp link; input — the number and, on Join Us, the prefilled message; observable result — the conversation opens to +62 831-8346-8485; access state — anonymous; failure/recovery — the number is also published as visible text on Join Us, Contact, and the footer; continuation — the visitor sends the message.
• Acceptance: the hero link resolves to https://wa.me/6283183468485; the Join Us link resolves to the same number with the exact prefilled message; no other number appears anywhere on the site.

4. User Personas

Team Visitor / Prospective Member

Product context. A fan or recruit who arrives at the WNU CLUB site from TikTok, a shared WhatsApp link, or a search result, usually on a mobile phone. They already know the team name or a player's nickname and want to confirm who plays for WNU CLUB and how to join the Flash Peak division. They have no account and expect none — this is a public team page, not a platform.

Primary goal. See the Flash Peak roster with real names, nicknames, and UIDs, follow the team's official TikTok, and reach the admin on WhatsApp with a registration message already written.

Distinct accepted responsibilities. This persona is the only actor who reads the roster, selects player cards, and initiates the outbound contact. Their work is discovery and initiation: they evaluate the team's credibility from the roster and brand, then choose one of two outbound routes — follow on TikTok, or start a registration conversation. They never manage roster data, never edit content, and never see anything private.

Relevant inputs and decisions. Inputs: the roster facts (nine members, one Captain, one member with UID "-"), the tagline, the TikTok account name, and the published admin number. Decisions: whether the team looks credible enough to follow or join; whether to follow on TikTok or go straight to WhatsApp registration; whether to send the prefilled message as-is or edit it before sending.

Interactions with other accepted participants. The visitor's registration action hands off directly to the Team Admin through WhatsApp, and their follow action hands off to TikTok as the content owner. The visitor never interacts with the admin inside the site; the site's responsibility ends at the handoff.

Observable success. The visitor has seen all nine roster cards with correct nicknames and UIDs, has reached the official WNU CLUB TikTok profile, or has opened a WhatsApp conversation to +62 831-8346-8485 with the Flash Peak registration message pre-filled.

Team Admin

Product context. The person behind the published number +62 831-8346-8485, who fields incoming inquiries from recruits and fans. They do not use the website as a tool — they are the destination the website points to. Their working surface is WhatsApp, not the site.

Primary goal. Receive registration inquiries that already state the intent, so that screening and onboarding can start without a round of clarifying questions.

Distinct accepted responsibilities. The admin is the sole recipient of the site's registration route. Their work is receiving and responding: reading the incoming message, identifying that the sender wants to join the Flash Peak division, and continuing the conversation in WhatsApp. They do not publish content on the site, do not manage the roster through the site, and have no site login.

Relevant inputs and decisions. Inputs: incoming WhatsApp messages carrying the prefilled registration text or a general inquiry. Decisions: whether to pursue the recruit, what to ask next, and whether to add them to the Flash Peak division — all made in WhatsApp, outside the site's scope.

Interactions with other accepted participants. The admin receives from the Team Visitor / Prospective Member and replies in the same WhatsApp thread. The site's role is limited to delivering the inquiry to the correct number with the correct context.

Observable success. An inquiry arrives at +62 831-8346-8485 that names the Flash Peak division and the sender's intent, and the admin can reply without asking what the sender wants.

5. Core User Flows

Flow 1 — A visitor arrives and understands the team (Home)

1. The Team Visitor / Prospective Member opens the WNU CLUB site root on a mobile device, arriving from a TikTok bio link or a shared WhatsApp message.
2. Home renders anonymously — no sign-in prompt, no account gate. The header shows the WNU CLUB logo and the five navigation links; the hero shows the title "WARUNG NENEK UKA (WNU CLUB)" and the tagline "Dominate the Peak, Powered by Family."
3. The visitor reads the identity block and sees two buttons: "Bergabung via WhatsApp" and "Kunjungi TikTok Kami".
4. The visitor decides which route fits their intent and either continues to Flow 2 (roster), Flow 4 (TikTok), or Flow 5 (registration).
5. Failure/recovery: if the logo image fails to load, its alt text renders and the navigation stays usable. If the visitor lands directly on a deeper page, that page renders fully and the header returns them to Home.
6. Continuation: the visitor moves to Roster, TikTok, Join Us, or Contact from the header.

Flow 2 — A visitor browses the Flash Peak roster (Roster)

1. The visitor selects Roster in the header.
2. The Roster page renders the "01 ROSTER" section header and the telemetry ticker of nicknames and UIDs, then the nine player cards in a 3-up grid at desktop, 2-up at tablet, 1-up at mobile.
3. As each card scrolls into view, its gold bezel arc draws from 0° to 360° and the UID counts up to its real value in tabular numerals. With reduced motion enabled, arcs render complete and UIDs render final.
4. The visitor reads card 1: ILHAMSYAH, nickname WNU.Icaaaaa, UID 11561868, with the Captain role tag.
5. The visitor continues through cards 2–9, reading each nickname, UID, and name: WNU.Mikk / 12299750 / Aditya Rizki Destiansyah; WNU.Ω / 12759754 / Abdullah Hilmi; WNU.CELIAA / 11829747 / Yudistira; WNU.ZEUSs\xe2\x9a\x9c️ / 11997056 / Rachmat Dava Rangga Wijaya; WNU.Syakiraa / 11919263 / Muhammad Keysha Alvaro; WNU.Wyanz / 11700724 / Kawian Adi Pramana; WNU.Gilang / - / Diki Ilham Setiawan; WNU.Cacaa / 11561906 / ANGGA.
6. The visitor selects a card to reveal that member's full details.
7. Failure/recovery: if a placeholder photo fails to load, the card still shows nickname, UID, name, and role. If a card cannot be expanded, the same values are readable on the card face.
8. Continuation: the visitor moves to TikTok, Join Us, or Contact.

Flow 3 — A visitor follows the team on TikTok (TikTok)

1. The visitor selects TikTok in the header, or activates "Kunjungi TikTok Kami" in the hero.
2. The TikTok page renders the "02 TIKTOK" section header, the official account name WNU CLUB, and the invitation text "Ikuti keseruan mabar, highlight pertandingan, dan konten seru tim WNU CLUB di TikTok!"
3. The visitor activates the profile button.
4. TikTok (external provider) opens the official WNU CLUB profile, where the visitor can follow and watch the team's content.
5. Failure/recovery: if the profile URL is not yet configured, the button renders disabled with a visible note and the account name and invitation text remain readable. If the link does not open, the visitor can still reach the team through Join Us or Contact.
6. Continuation: the visitor returns to the site and may proceed to Join Us.

Flow 4 — A prospective member starts registration (Join Us → WhatsApp → Team Admin)

1. The visitor selects Join Us in the header, or activates "Bergabung via WhatsApp" in the hero.
2. The Join Us page renders the "03 JOIN US" section header, the invitation text "Ingin bergabung menjadi bagian dari divisi Flash Peak WNU CLUB? Hubungi Admin kami sekarang!", and the published admin number +62 831-8346-8485.
3. The visitor activates the button "Hubungi Admin via WhatsApp (+62 831-8346-8485)".
4. WhatsApp (external provider) opens a conversation to +62 831-8346-8485 with the draft message already written: "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak."
5. The visitor reviews the draft, optionally edits it, and sends it.
6. The Team Admin receives the message at +62 831-8346-8485 with the Flash Peak registration intent already stated, and replies in the same WhatsApp thread. Screening and any roster decision happen in that conversation, outside the site.
7. Failure/recovery: if WhatsApp is not installed or the link cannot be handled, the number +62 831-8346-8485 is visible as selectable text on Join Us, Contact, and the footer, and the visitor can start the conversation manually.
8. Continuation: the registration conversation continues in WhatsApp; the visitor may return to the site to browse the roster or TikTok.

Flow 5 — A visitor confirms official channels (Contact)

1. The visitor selects Contact in the header.
2. The Contact page renders the "04 CONTACT" section header, the published admin WhatsApp number +62 831-8346-8485, the TikTok identity WNU CLUB, and the footer line "Admin WhatsApp +62 831-8346-8485 | TikTok: WNU CLUB" with the copyright "© 2026 WARUNG NENEK UKA (WNU CLUB). All Rights Reserved."
3. The visitor activates the WhatsApp action to reach the admin, or the TikTok action to open the official profile.
4. Failure/recovery: if a channel link fails to open, the number and account name remain visible as plain text for manual use.
5. Continuation: the visitor returns to Join Us for the prefilled registration route, or leaves the site.

6. Visuals Colors and Theme

The visual system follows the supplied creative direction: MARQ by Garmin — precision instrument luxury, where the required navy/black/gold/orange brand becomes an engineered instrument system rather than a generic neon eSport template. Player cards read as engraved instrument plaques; UIDs read as dial numerals.

Color tokens (dark mode)

Usage rules: #080C14 is the page ground; #101A2B is the raised titanium panel for cards and the nav; #12274A fills the hero block, section bands, and button bases; #E8B23A is the instrument signal — bezel rings, UID numerals, hairline rules, hover sweep. Orange #F26A1B appears only as a secondary signal (live/recruit badges, the Join Us button) at under 5% of the surface. Body text #F2EFE6 on #080C14 gives approximately 16:1 contrast; gold text is used only at 18px or larger, or on #080C14 where it clears 7:1.

Typography

• Headings: Saira Condensed 700–900, uppercase, tracking +0.02em, at instrument scale. Hero wordmark clamp(44px, 9vw, 132px); section heads clamp(30px, 5vw, 56px); card nickname clamp(20px, 2.4vw, 28px).
• Numerals (UIDs, section indices): Barlow Semi Condensed 600 with font-variant-numeric: tabular-nums, so every UID column aligns like a dial readout.
• Body: Barlow 400/500, 16px / 1.6. Tagline in Barlow 500 at 15–20px with 0.08em tracking.
• Micro-labels: 12px uppercase, tracking 0.14em.
• Scale: 1.25 modular on a 4px base — 132 / 76 / 44 / 28 / 20 / 16 / 14 / 12.

Shape language. Engineered circles and ruled rectangles. Player cards are plaques with a 1px gold bezel and a 4px corner radius. The avatar sits inside a circular gauge ring with a 2px gold arc and a faint tick-mark ring. Buttons are squared with a 2px radius and a 1px inner highlight — never pills. Section transitions use a thin gold hairline rule with a small tick scale at the left edge, echoing a bezel. No blobs, no large radii, no glassmorphism.

Layout. Strict 12-column grid, max-width 1280px with 24px gutters (16px at 375px). The hero is an asymmetric split: the wordmark block occupies columns 1–7, a circular emblem/gauge occupies columns 8–12 and bleeds off the right edge. Roster is 3-up at 1280px, 2-up at 768px, 1-up at 375px, each card with a fixed internal rhythm: circular avatar gauge, nickname, ruled UID row, name, role tag. Nav is a full-width bar with logo left, five links right, and a gold hairline under the whole bar. Sections are separated by numbered headers — 01 ROSTER, 02 TIKTOK, 03 JOIN US, 04 CONTACT — in condensed caps.

Imagery. Macro-material and instrument imagery: brushed titanium and navy anodised texture crops, a topographic contour line field behind the hero, a circular gauge/bezel motif as the hero emblem, and the logo treated as an engraved metal plate rather than a flat PNG on white. Player photos are placeholder silhouettes inside the circular gauge ring with a subtle scanline overlay — no stock people, no 3D characters, no particle fields. The TikTok section uses a cropped 9:16 phone frame with a gold bezel edge.

Avoid. Blue-indigo SaaS accents (#2563EB, #6366F1, #7C3AED) or any violet gradient; white or near-white page grounds and glassmorphism frosted cards; Inter, Roboto, Poppins, Montserrat, or system-ui for headings or body; neon purple/cyan glow effects, particle fields, and 3D character renders; pill-shaped buttons and 16–24px card radii; centred headline + subtext + blue button hero with a gradient blob; identical hover-lift card grids with soft drop shadows; photographic stock people or anime-style avatars.

7. Signature Design Concept

The Instrument Plaque Roster.

The public entry is a full-bleed #12274A navy block filling the first viewport, carrying a faint topographic contour field and a single slow light sweep. On the left, spanning columns 1–7, the wordmark WARUNG NENEK UKA is set in Saira Condensed 900 uppercase at clamp(44px, 9vw, 132px), stacked on three lines, with (WNU CLUB) as a smaller gold condensed line beneath it. A gold hairline sits above the tagline "Dominate the Peak, Powered by Family." in Barlow 500. Beneath the tagline, two squared buttons sit in a row: solid gold "Bergabung via WhatsApp" with navy text, and navy-outlined-with-gold-hairline "Kunjungi TikTok Kami".

On the right, spanning columns 8–12 and cropped by the right viewport edge, a large circular instrument emblem turns on a 60-second turntable: concentric gold bezel rings, tick marks, and the WNU logo plate at its centre. The emblem is decorative and carries no readable text or control; it bleeds off the edge by design while every headline, label, and button stays whole inside the viewport at 375px, 768px, and 1280px.

The concept carries into the roster, where each of the nine players becomes an engraved instrument plaque: a circular gauge ring around the placeholder avatar whose gold arc draws 0°→360° on scroll-in while the UID counts up from 00000000 to its real value in tabular numerals. Section headers read as numbered instrument readouts — 01 ROSTER, 02 TIKTOK, 03 JOIN US, 04 CONTACT — sitting on a gold hairline rule with a tick scale at the left edge. A continuous thin marquee ticker of roster nicknames and UIDs runs along the top of the roster section like a telemetry strip, pausing on hover and wrapping into static rows under reduced motion.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the circular instrument emblem on the right — concentric gold bezel rings, tick marks, and the WNU logo plate at its centre — cropped by the right viewport edge.
• Input → transformation → outcome thesis: on load, the emblem begins a slow 60-second turntable rotation while a single light sweep travels across the bezel; the wordmark block settles into place and the gold hairline above the tagline draws left-to-right. The outcome is a first frame that reads as a running instrument, not a static banner — the team appears switched on and measured.
• Motion vocabulary: instrument motion only — 400–600ms cubic-bezier(0.2, 0.7, 0.2, 1); the 60s turntable; a light sweep across the bezel; nav links get a gold underline that sweeps left-to-right on hover with no bounce; buttons are squared metal keys with a 1px inner highlight and a gold sweep on hover.
• Composed first frame: full-bleed #12274A navy with the topographic contour field faint behind; wordmark stacked left in Saira Condensed 900; gold hairline and tagline beneath; two squared buttons in a row; the gold bezel emblem already mid-rotation on the right, bleeding off the edge.
• Reduced-motion state: with prefers-reduced-motion: reduce, the emblem is static at a composed angle, the light sweep is removed, the hairline and wordmark render final, roster bezel arcs render complete, UIDs render final, and the roster ticker wraps into static rows so every nickname and UID is fully readable.

9. Non-Functional Requirements

NFR-1 — Technology constraint (explicit). The site must be built with HTML, CSS, and JavaScript. No framework or build step is required by the source; any tooling used must still deliver HTML, CSS, and JavaScript to the browser.

NFR-2 — Accessibility (explicit). Use accessible color contrast, semantic HTML, and alt text for all images and icons. All main actions must be keyboard accessible. Rationale: stated directly in the source requirements.

NFR-3 — Language (explicit). Primary language is Bahasa Indonesia, with structural and technical elements compatible for translation. Rationale: stated directly in the source requirements.

NFR-4 — Responsive readability (required_inference). Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. Decorative imagery and motion may crop or bleed off an edge, but must never cover readable text or a control. Rationale: the roster carries dense name/nickname/UID data and the direction specifies edge-bleeding decoration; the two must not collide.

NFR-5 — Reduced motion (required_inference). With prefers-reduced-motion: reduce, all animation resolves to a usable static arrangement: bezel arcs complete, UIDs final, emblem static, ticker wrapped into readable rows. Rationale: the direction specifies continuous motion (turntable, ticker, count-ups) that must remain usable for motion-sensitive visitors.

NFR-6 — Outbound link integrity (required_inference). Every WhatsApp link resolves to https://wa.me/6283183468485; the Join Us link carries the exact prefilled message; both TikTok entry points resolve to the same official WNU CLUB profile. Rationale: the site's only functional outcomes are these handoffs, so a wrong target silently breaks the accepted journey.

NFR-7 — Static delivery (required_inference). The site is served as static assets with no server-side session, database, or account store, because no accepted requirement needs private per-visitor state. Rationale: keeps delivery aligned with the HTML/CSS/JavaScript constraint and the anonymous access contract.

10. Tech Stack

• HTML5 — semantic markup for the five pages, header navigation, hero, roster grid, TikTok panel, Join Us panel, and footer. (explicit)
• CSS3 — custom properties for the color and type tokens, CSS Grid for the 12-column layout and roster grid, clamp() for the fluid type scale, @media (prefers-reduced-motion: reduce) for the static arrangement. (explicit)
• Vanilla JavaScript — scroll-in triggers for the bezel arc draw and UID count-up, the roster ticker pause-on-hover, and card detail expansion. (explicit)
• Fonts — Saira Condensed (headings), Barlow (body), Barlow Semi Condensed (numerals), self-hosted or loaded via a font service. (direction)
• No backend, database, or authentication service — the site is static and anonymous; WhatsApp and TikTok are external destinations reached by outbound links. (required_inference)

11. Assumptions and Constraints

Constraints (explicit, binding)

• The site is built with HTML, CSS, and JavaScript.
• The visual theme uses Navy Blue / Biru Dongker, Black, and Gold / Orange from the WNU CLUB logo, with a modern, bold, competitive feel and Flash Peak-style visual effects.
• Player cards use gold/navy blue frames and placeholder photos.
• WhatsApp links point to https://wa.me/6283183468485 / +62 831-8346-8485.
• The Join Us WhatsApp button opens a conversation with the prefilled draft message "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak."
• The roster is limited to the Flash Peak division and the nine listed members; member 8 (Diki Ilham Setiawan / WNU.Gilang) has UID "-".
• The copyright text reads exactly "© 2026 WARUNG NENEK UKA (WNU CLUB). All Rights Reserved."
• Navigation is exactly Home, Roster, TikTok, Join Us, Contact.

Assumptions (narrow, labeled)

• The WNU CLUB logo image is supplied by the team; until then, a placeholder treated as an engraved metal plate is used, with alt text "WARUNG NENEK UKA (WNU CLUB)". (required_inference)
• Player photos are placeholders as specified; no real player photographs are required for this delivery. (explicit)
• The official WNU CLUB TikTok profile URL is configured by the team before launch; until then the TikTok buttons render disabled with a visible note rather than pointing to an unverified account. (required_inference)
• The admin number +62 831-8346-8485 is active and monitored on WhatsApp by the Team Admin. (required_inference)
• Registration, screening, and any roster decision happen entirely in WhatsApp and are outside this site's scope. (explicit boundary)
• No account, login, or member area exists on the site; all five pages are anonymous. (required_inference)

Out of scope (current horizon)

• Any division other than Flash Peak.
• Any roster member beyond the nine listed.
• On-site registration forms, member dashboards, or roster editing.
• Embedded TikTok video playback or re-hosted team media.
• Payments, merchandise, sponsorships, or match scheduling.

12. Glossary

• WNU CLUB — WARUNG NENEK UKA, the eSport team this website represents.
• Flash Peak — the game title and the team's competitive division; the roster is limited to this division.
• Roster — the published list of nine Flash Peak players with nama, nickname, UID, and role.
• Nickname — the in-game handle used by a player, prefixed "WNU." (for example WNU.Icaaaaa).
• UID — the player's in-game account identifier, displayed in tabular numerals; member 8's UID is published as "-".
• Captain — the role tag carried by roster member 1, ILHAMSYAH (WNU.Icaaaaa).
• Player Card — the interactive instrument-plaque component presenting one roster member's placeholder photo, nickname, UID, name, and role.
• Join Us — the registration destination that hands the visitor to WhatsApp with the prefilled Flash Peak registration message.
• Prefilled message — the draft text "Halo Admin WNU CLUB, saya ingin mendaftar ke tim eSport Flash Peak." carried into the WhatsApp conversation by URL parameter.
• Team Admin — the person monitoring +62 831-8346-8485 who receives registration inquiries in WhatsApp.
• Instrument plaque — the design treatment of a player card: gold bezel frame, circular avatar gauge, ruled UID row, condensed technical numerals.
• Telemetry ticker — the thin marquee strip of roster nicknames and UIDs above the roster section, pausing on hover and wrapping into static rows under reduced motion.