Nginx Configuration Generator Specification

Overview

A high-performance, single-file browser utility that allows system administrators and developers to generate standardized Nginx server blocks. It focuses on common use cases: Reverse Proxy, Load Balancing, Static Site Serving, and HTTP-to-HTTPS redirection.

Core Features

• Template Selection: Choose from common recipes (Simple Reverse Proxy, Load Balancer, Static Site, Redirects).
• Form-Based Configuration: Input fields for Domain Name, Proxy Pass Address (Upstream), Port, and SSL pathing.
• Real-time Syntax Highlighting: A dedicated output pane using a pre-formatted code block with visual syntax highlighting.
• One-Click Copy & Download: Buttons to copy raw text to the clipboard or trigger a .conf file download.
• Validation Engine: JavaScript-based logic to validate domain formats and port ranges before allowing configuration export.

UI/UX Layout

• Header: Simple, clean title and description.
• Main Tool Area: A two-column responsive grid.
  • Left Column: Form controls (Input fields, dropdowns, checkboxes).
  • Right Column: Read-only code editor window showing the resulting Nginx directive.
• Theme: High-contrast light mode. Using a professional palette of #FFFFFF background, #F8FAFC sidebars, #1E293B text, and #2563EB (Blue) for primary actions.

Technical Constraints & Directives

• Architecture: Single HTML file. Use Tailwind CSS via CDN for styling. Use Vanilla JS for all state and logic management.
• Memory Only: Strictly zero use of localStorage, sessionStorage, or cookies. The state is purely managed in JS variables.
• No Dependencies: Do not use frameworks like React or Vue. Minimal dependency injection via CDN only.
• Sandboxing: Ensure the app is compatible with iframe embedding. Replace alert() or prompt() with custom HTML/CSS modal dialogs within the page.
• Accessibility: Ensure high contrast for all text and ensure keyboard navigation works for all input fields.

Design Aesthetics

• Micro-interactions: Use CSS transition (all 0.2s ease-in-out) for hover effects on buttons and focus states on input fields.
• Typography: System-default font stack (Inter, system-ui, sans-serif) for high readability.
• Shadows: Use small, elegant dropshadows (shadow-sm) to distinguish input panels from the main container background.

Implementation Roadmap for Developer

1. Create the base HTML structure with Tailwind CSS integrated.
2. Define the configuration state object in JS to track user inputs.
3. Write the generator logic that dynamically builds the template string based on current state.
4. Implement an event listener on every input field to update the preview block instantly.
5. Build a custom modal component for "Copied to clipboard" success messaging.