Technical Specification: Free Online Security.txt Generator

1. Overview

A client-side web application designed to help developers and website administrators generate valid security.txt files compliant with RFC 9116. The tool provides a user-friendly interface to input security contact details and generates a copy-pasteable, downloadable text file.

2. Core Features

• Live Preview: As the user types in the form, the security.txt content updates in real-time in a read-only code block.
• Field Validation: Real-time validation for email addresses, URLs, and date formats (ISO 8601) to ensure the generated file is RFC-compliant.
• Download & Copy: One-click functionality to copy the generated text to the system clipboard and download the content as a .txt file.
• Standardized Field Support:
  • Contact (Email/URL)
  • Encryption (PGP Key URL)
  • Acknowledgments (URL)
  • Hiring (URL)
  • Policy (URL)
  • Preferred Languages (ISO 639 codes)
  • Expires (Date picker)
• Contextual Help: Tooltips explaining each field's purpose according to RFC 9116.

3. UI/UX Layout

• Header: Simple title: "Security.txt Generator". No nav bars.
• Main Content Area: A two-column split layout on desktop (Form on left, Preview on right) and a single-column stack on mobile.
• Form Section: Grouped inputs with clean, descriptive labels and floating-label interaction styles.
• Preview Section: A stylized code block with syntax highlighting (even if basic), featuring a distinct "Copy to Clipboard" button in the corner.
• Footer/Bottom Section: No footer. Minimalist interface focus.

4. Color Palette (Light Mode Only)

• Primary Surface: White (#FFFFFF)
• Background: Soft Gray (#F9FAFB)
• Primary Accent: Vibrant Indigo (#4F46E5) for buttons.
• Text: Dark Charcoal (#1F2937) for readability.
• Borders/Dividers: Light Slate (#E5E7EB).
• Success/Alert: Soft Emerald (#10B981) for confirmation toasts.

5. Technical Directives

• Architecture: Single-file HTML5 (CSS/JS embedded). Use Tailwind CSS via CDN.
• State Management: Pure Vanilla JavaScript. Store form values in a single object variable; update DOM elements via document query selectors. Do NOT use localStorage.
• Interaction: Smooth CSS transitions on all button hovers and focus states. Use custom overlay divs for modal notifications (e.g., "Copied to clipboard!").
• Security: Run in a sandboxed iframe. Ensure all external links use rel="noopener noreferrer".
• Compatibility: Ensure responsiveness via CSS Flexbox/Grid. The form must remain scrollable independently if it exceeds the viewport height on smaller screens.
• Download Logic: Use Blob() and URL.createObjectURL() to generate the download link programmatically on the fly.