Technical Specification: Free Online Docker Compose YAML Generator

Overview

A clean, efficient, and user-friendly single-file web application that allows developers to assemble a docker-compose.yml file by selecting services and configuring their parameters via a visual interface.

Key Features

• Dynamic Service Selection: A library of common service presets (e.g., PostgreSQL, Redis, Nginx, Node.js, Python, MongoDB).
• Configuration Forms: For each added service, a dynamic input form appears to handle:
  • Container Name
  • Image Version/Tag
  • Port Mappings (Host:Container)
  • Volume Mounts
  • Environment Variables (Key-Value pairs)
• Live YAML Preview: A side-by-side or top-bottom layout showing the raw YAML output updating in real-time as the user types.
• Clipboard Interaction: A "Copy to Clipboard" button with visual feedback.
• Syntax Verification: Basic structural validation to ensure the generated YAML is not obviously malformed.

UI/UX Design Specification

• Layout:
  • Header: Simple, professional branding-free title with a brief description.
  • Main Area: A two-column interface. Left column (40%): A list of available services to add, followed by an accordion-style list of added services and their settings. Right column (60%): A fixed, scrollable code preview panel.
• Color Palette (Light Mode Only):
  • Background: #f8f9fa (Soft Grey)
  • Card Background: #ffffff (White)
  • Primary Accent: #2563eb (Professional Blue)
  • Success/Button: #16a34a (Emerald Green)
  • Text: #1f2937 (Dark Slate)
  • Border/Subtle: #e5e7eb (Light Grey)
• Transitions: Smooth slide-in animations when adding a new service card. Fade-in for copy-success notifications.

Developer Guidelines (Strict Rules)

• Architecture: Single HTML file containing all CSS (in <style> tag) and Vanilla JavaScript (in <script> tag). No build steps or frameworks.
• No Storage: Absolutely NO usage of localStorage, sessionStorage, or cookies. Application state must be maintained in simple JavaScript variables/objects.
• Security: Since this runs in a sandboxed iframe, avoid eval(). Use document.createElement or textContent for DOM manipulation to prevent XSS.
• Responsive Design: Use CSS Grid/Flexbox to ensure the preview panel moves underneath the configuration panel on mobile viewports (< 768px).
• Feedback UI: No alert() or confirm(). Create a floating div modal for all user feedback (e.g., "Copied to clipboard!").
• External Links: All external documentation links (e.g., Docker docs) must use target="_blank" rel="noopener noreferrer".