Free Online Whois Data Mockup Generator for Designers

Technical Specification: Free Online Whois Data Mockup Generator

Overview

A browser-based tool designed for UI/UX professionals and front-end developers to generate realistic Whois lookup result visualizations for design mockups, prototypes, and agency portfolios. This tool creates static data display mockups without requiring live API connections or database storage.

Core Features

• Live Data Editor: Input fields for Domain Name, Registrar, Dates (Created, Updated, Expiry), Name Servers, and Status Codes.
• Preset Templates: One-click generation of common Whois result styles (e.g., standard tabular, raw text output).
• Instant Preview: A real-time preview panel rendering the formatted data. Users can toggle between 'Standard Table View' and 'Raw Terminal View'.
• Copy Functionality: Copy formatted text or code blocks directly to the clipboard.
• Randomization: 'Randomize' button to quickly populate fields with realistic dummy data for rapid prototyping.

UI/UX Layout

• Control Panel (Top/Left): Organized field groups for 'Domain Details', 'Dates', 'Registrant Info', and 'Technical Details'. Uses a clean, stacked input layout with labeled fields.
• Preview Panel (Bottom/Right): A clean, card-based display showing the rendered Whois record. Styling should mimic professional domain registrar interfaces using monospaced typography.
• Header: Minimalist header with tool title and clear utility actions (Reset, Copy, Randomize).

Design Language (Strict Light Mode)

• Palette: Professional corporate aesthetic.
  • Primary: #2563eb (Blue)
  • Background: #f8fafc (Off-White)
  • Surface/Card: #ffffff (White)
  • Text: #1e293b (Dark Slate)
  • Borders/Dividers: #e2e8f0 (Light Gray)
• Typography: Inter (sans-serif) for UI elements; Fira Code or Courier New (monospace) for the Whois data output.

Technical Guidelines

• Architecture: Single-file HTML5/CSS3/Vanilla JS structure. Tailwind CSS via CDN for styling.
• No Persistence: NO localStorage, sessionStorage, or cookies. All input is transient and held only in component memory.
• Sandbox Safety: Do not use alert(), confirm(), or prompt(). Implement custom UI components (modals/toasts) for alerts.
• Responsive Design: The application must handle window resizing gracefully. On mobile, the control panel should transition to a vertical layout above the preview panel.
• Performance: High-speed, instantaneous updates to the preview panel as input fields change.