Build a Social Media Bio Generator with AI

Build a single-page social media bio generator as a static HTML/CSS/JS site. Dark background (#0a0a0f) with a centered container (max-width 800px). Header: "Social Media Bio Generator" in white 28px bold, subtitle "Create the perfect bio for every platform in seconds" in #8888a0. INPUT SECTION — a #12121a card with rounded corners (12px) and 1px #2a2a3a border: Row 1: "Your Profession / Role" — text input, full width (placeholder "e.g. Full-Stack Developer, Fitness Coach, Freelance Photographer") Row 2: Two side-by-side inputs: - "Key Skills / Interests" — text input, 60% width (placeholder "e.g. React, Node.js, open source, coffee lover") - "Location" — text input, 40% width (placeholder "e.g. San Francisco, CA") Row 3: "What You're Working On" — text input, full width (placeholder "e.g. Building a SaaS for small businesses, training for a marathon") Row 4: "Tone" — a row of 5 selectable pill buttons: - "Professional" (default selected, blue highlight) — corporate-friendly language - "Casual" — friendly, conversational - "Witty" — humor, wordplay, puns - "Inspirational" — motivational, purpose-driven - "Minimal" — ultra-short, punchy, no filler Row 5: "Include Emojis" — toggle switch (default on). When enabled, show an EMOJI SUGGESTIONS row: a horizontally scrollable strip of 20 relevant emojis based on the profession input. Group them: profession-related (laptop for developer, camera for photographer, etc.), activity-related, and universal favorites. Clicking an emoji copies it to clipboard with a flash animation. "Generate Bios" button — full width, #3b82f6 background, white text, 48px height, rounded 10px. The generation logic should be client-side JavaScript (no API calls) using template-based generation with randomization. GENERATED BIOS SECTION (appears after clicking Generate): Four platform cards arranged vertically, each with distinctive styling: 1. TWITTER / X CARD (border-left: 3px solid #000): - Platform icon (X logo as inline SVG) and "Twitter / X" label, with "160 characters" limit note in #6a6a80 - Generated bio text in an editable textarea (13px, line-height 1.5) — pre-filled with a bio that fits within 160 characters - Character counter below: "142/160" — text turns yellow at 140+, red at 160+ - "Copy" button (small, right-aligned, #3b82f6) - The bio style for this platform: punchy, uses pipe separators or bullet points, may include a hashtag 2. INSTAGRAM CARD (border-left: 3px solid #e1306c): - Instagram gradient icon and "Instagram" label, "150 characters" limit - Editable textarea with 150-char bio — uses line breaks creatively, may include relevant emojis between lines - Character counter, Copy button - Instagram style: line-break separated items, emoji-heavy if enabled, may include a CTA like "DM for collabs" 3. LINKEDIN CARD (border-left: 3px solid #0077b5): - LinkedIn icon and "LinkedIn" label, "2,000 characters" limit - Editable textarea with a longer professional bio (200-400 chars) — full sentences, mentions experience, value proposition, and a call to connect - Character counter, Copy button - LinkedIn style: professional first-person narrative, mentions industry impact, ends with "Let's connect" or similar 4. TIKTOK CARD (border-left: 3px solid #ff0050): - TikTok icon and "TikTok" label, "80 characters" limit - Editable textarea with ultra-short bio — maximum impact in minimal space - Character counter, Copy button - TikTok style: trendy, may reference content type, uses emojis heavily, very casual The generation engine should work as follows (pure JS, no external API): - Maintain arrays of bio templates for each platform and tone combination - Templates have slots like {role}, {skills}, {location}, {project} - Have 5+ templates per platform-tone combo for variety - "Regenerate" button (circular arrow icon) on each card regenerates just that platform's bio - "Regenerate All" button below all cards regenerates everything Below the platform cards, a "COPY ALL" button that copies all four bios formatted with platform headers into the clipboard. HISTORY SECTION (collapsible): Store the last 10 generated bio sets in localStorage. Show them in a list with the date, profession used, and a "Restore" button that loads that set back into the output cards. Save all input fields to localStorage. On page load, restore inputs but do not auto-generate (user must click Generate). On mobile (under 768px), make all inputs full-width stacked, tone pills wrap to two rows, and platform cards are full width. 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].