Personalized Link Landing Page Generator

A professional-grade, client-side web application that allows users to create, style, and export a custom "link-in-bio" landing page. The tool functions as a WYSIWYG editor that generates clean, deployable HTML/CSS code.

Core Features

1. Visual Link Manager

• Drag-and-Drop Reordering: Users can organize their links by dragging them in the editor sidebar.
• Link Customization: Each link entry includes fields for label, destination URL, and an optional visual icon (using a library of standard SVG icons).
• Bulk Operations: Add, duplicate, or delete links with a single click.

2. Design and Branding Panel

• Global Style Controls: Change background colors, text colors, and button styles (rounded, square, pill-shaped) in real-time.
• Font Selection: A curated list of web-safe fonts for professional typography.
• Profile Header: Ability to upload a profile photo (processed via base64 encoding to keep the file standalone) and set a profile title and bio description.

3. Live Preview Engine

• Real-Time Rendering: The main window shows an immediate preview of the page as settings change.
• Responsive Toggles: Buttons to switch the preview window between mobile (375px), tablet (768px), and desktop (1024px) views.

4. Export & Deployment

• HTML/CSS Generation: One-click generation of a single-file HTML document. This file contains all styles and structures, making it extremely easy to host on platforms like GitHub Pages, Netlify, or custom servers.
• Code Preview: A modal that displays the raw HTML/CSS/JS for users who prefer to copy-paste into existing site templates.

User Interface (UI) Structure

• Two-Pane Layout:
  • Left Sidebar (300px): Editor tools, settings, and link management.
  • Right Main Panel (Flexbox): Live preview of the generated landing page.
• Visual Aesthetic: Minimalist, clean, and "neutral-modern" color palette (whites, light grays, and soft blues) to ensure the user’s own content stands out.

Technical Implementation Details

• Storage: Uses localStorage to save the user's progress automatically, allowing them to return to their work without losing data.
• Performance: Optimized for speed; no backend database, no cookies, and no tracking. Everything executes in the browser.
• Export Logic: The generator uses a template literal to combine the user’s selected styles and inputs into a standardized, valid HTML structure.