Online Git Ignore File Generator

Overview

A high-performance, single-file browser application designed to help developers create custom .gitignore files. By allowing users to select multiple categories (Language, IDE, OS), the tool dynamically merges relevant rules into a single, clean configuration file.

Key Features

• Multi-Selection Logic: Users can select multiple templates (e.g., 'Java', 'IntelliJ', 'Windows') to generate a comprehensive ignore file.
• Search & Filter: Real-time search functionality to quickly find specific technologies, frameworks, or operating systems.
• Dynamic Preview: A real-time preview pane showing the generated code before copying or downloading.
• One-Click Actions: Integrated 'Copy to Clipboard' and 'Download as .gitignore' file triggers.
• Zero Dependency Architecture: Built using native browser APIs for maximum speed and compatibility.

UI Layout Specification

• Header: Clean, centered title with a descriptive tagline.
• Main Content Area (Split-View):
  • Left Pane (Selector): A scrollable list of available templates with a search input at the top. Each item includes a checkbox.
  • Right Pane (Preview): A code block area with syntax highlighting simulation. Includes fixed 'Action' buttons (Copy, Download) at the top right of this pane.
• Responsiveness:
  • Desktop: Two-column layout (Left 40%, Right 60%).
  • Mobile: Vertical stack (Selector on top, Preview on bottom).

Design & Aesthetics

• Color Palette:
  • Background: Off-white (#f9fafb).
  • Card Backgrounds: White (#ffffff).
  • Primary Buttons: Vivid Indigo (#4f46e5).
  • Secondary Text: Slate Gray (#64748b).
  • Border/Dividers: Light Gray (#e2e8f0).
• Typography: Sans-serif, modern system fonts (Inter, Segoe UI).
• Transitions: Smooth fade-ins and scale-up interactions for button clicks.

Developer Technical Requirements

• Constraint Compliance:
  • Single File Only: Bundle all CSS/JS into the HTML file.
  • No Storage: DO NOT use localStorage, sessionStorage, or cookies. State must be maintained entirely within JS variables (const / let).
  • Iframe Safe: Do not use alert(), prompt(), or confirm(). Use custom modal components if user feedback is needed.
  • External Links: Use <a href="..." target="_blank" rel="noopener noreferrer"> for all external references.
• Implementation Details:
  • Use Tailwind CSS via CDN for rapid styling.
  • Maintain the list of 50+ templates as a simple JSON constant inside the script tag.
  • Ensure the download functionality uses Blob and URL.createObjectURL to create a downloadable text file without external server calls.