Random Name Generator Specification

Overview

A high-performance, browser-based tool designed to generate authentic, realistic names based on user-defined nationality and gender filters. This tool is built for maximum utility, targeting creative writers, software developers needing test data, and game designers.

Core Features

• Nationality Filtering: A searchable dropdown menu to select specific countries of origin (e.g., Japanese, French, American, Nigerian, etc.).
• Gender Filtering: Options for Male, Female, or Gender-Neutral names.
• Bulk Generation: Ability to generate a batch of names (1-50) in a single click.
• One-Click Copy: Integrated copy-to-clipboard functionality for individual names or the entire list.
• In-Memory History: A temporary list showing current session results (cleared on page refresh due to sandbox constraints).

User Interface Design

• Layout:
  • Header: Clean, centered, descriptive title with a clear, concise instruction sub-header.
  • Control Area: A card-based layout featuring a grid with two primary dropdowns (Nationality, Gender) and a numerical input for quantity, followed by a prominent "Generate Names" action button.
  • Results Area: A responsive grid displaying result cards. Each card contains the name and a "Copy" icon button.
• Aesthetic:
  • Color Palette: Pristine White background (#FFFFFF), soft Gray borders (#E5E7EB), vibrant Primary Blue (#2563EB) for buttons, and Slate text (#1F2937).
  • Typography: Clean, sans-serif stack (Inter, system-ui, sans-serif).
  • Transitions: Subtle 200ms fade-in animations when generating new content. Button hover states use a scale transform (1.02x) for tactile feedback.

Technical Requirements & Constraints

• Single-File Architecture: All CSS, JS, and HTML must reside in one file. Use Tailwind CSS via CDN for styling.
• Sandboxed Compatibility:
  • NO Storage: Do not use localStorage, sessionStorage, or cookies. Maintain all data in a plain JavaScript object/array variable.
  • No Alert/Prompt: All user feedback (errors, notifications) must be handled through custom-styled UI elements (e.g., hidden divs that toggle to visible).
• Performance: Use efficient array filtering methods (.filter()) to ensure instant results even with a large JSON dataset embedded in the script.
• Responsive: The layout must stack vertically on mobile and expand into a 3-column grid on desktop.

Implementation Note

All nationality data should be stored as a static constant JSON object within the script. When a user requests a name, the application performs an in-memory look-up based on the selected keys, ensuring near-instantaneous output without any server calls.