Build a Baby Name Generator with AI

Build a single-page baby name generator and browser as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #1a1a2a, and accent color #14b8a6 (teal). Center the layout with a max-width of 760px. Create a hardcoded database of at least 500 baby names as a JavaScript array of objects. Each name object has: name (string), gender ("boy", "girl", or "unisex"), origin (string from the list: English, Spanish, Japanese, Arabic, Hindi, French, Italian, Greek, Hebrew, Irish, African, Scandinavian, Chinese, Korean), meaning (string, 5-20 words describing the name's meaning), pronunciation (phonetic spelling in parentheses, e.g., "ah-REE-ah"), and popularity (number 1-100, where 100 is most popular). Distribute names roughly equally across genders and include at least 30 names per origin. Names should be real, properly attributed, and culturally accurate. The main interface has a filter bar at the top with: a gender toggle (three pill buttons: Boys, Girls, All), an origin dropdown (multi-select or single-select with "All Origins" default), an alphabetical filter (clickable A-Z letter bar where clicking a letter filters names starting with that letter, clicking again deselects), a search input for typing name fragments, and a sort dropdown (Popularity, Alphabetical A-Z, Alphabetical Z-A, Name Length). All filters combine — selecting "Girls" + "Japanese" + "A" shows only Japanese girl names starting with A. Display filtered names in a responsive card grid (3 columns on desktop, 2 on tablet, 1 on mobile). Each name card shows: the name in large bold text, a small gender indicator icon (blue circle for boy, pink circle for girl, purple for unisex), the origin as a subtle tag below the name, the meaning in smaller text (2 lines max with ellipsis overflow), the pronunciation in italic grey text, and a heart icon button in the top-right corner for favoriting. Clicking the heart toggles it filled/unfilled with a brief scale animation. Show a count of total results matching current filters above the grid (e.g., "Showing 47 of 523 names"). Implement pagination or infinite scroll: show 30 names initially, load 30 more on scroll or "Load More" button click. Include a "Random Name" button (dice icon) prominently placed near the top that selects a random name from the current filtered set and highlights it with a glow animation, scrolling it into view. If all filters result in zero names, show a friendly empty state: "No names match your filters. Try broadening your search." Add a Favorites section accessible via a tab or toggle at the top: "Browse" and "Favorites". The Favorites view shows only hearted names in the same card layout. Include a "Compare" feature: selecting 2-3 favorites shows them side by side in a comparison row at the top with name, meaning, origin, and popularity for easy decision-making. Add a "Clear All Favorites" button with a confirmation dialog. Implement a name detail modal: clicking a name card opens a larger view showing the full name, gender, origin with a brief cultural context line (hardcoded per origin, e.g., "Japanese names often reflect nature, seasons, or virtues"), full meaning, pronunciation with a "Listen" button (use Web Speech API speechSynthesis to pronounce the name), popularity rank display (e.g., "Ranked #23 in popularity"), and similar names (show 3-5 names from the same origin and gender). Include "Add to Favorites" and "Close" buttons. Store favorites in localStorage with the name as the key. Also store the user's last filter settings so returning to the page restores their previous browsing session. Add a stats section at the bottom of the main page: total names in the database, breakdown by gender (pie chart drawn with CSS conic-gradient), top 5 most popular names for each gender, and most represented origins. Make it fully responsive: cards resize and reflow on small screens, the filter bar wraps or becomes a collapsible panel on mobile, tap targets are at least 44px, and the alphabetical bar scrolls horizontally on narrow screens. Include smooth scroll behavior and transition animations on filter changes. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].