Technical Specification: Professional Random Number & Sequence Generator

1. Overview

A highly responsive, browser-based utility designed to generate random numbers and unique sequences. The application focuses on clarity, precision, and usability, targeting users needing random data for lotteries, gaming, or statistical sampling. The app must run entirely in-memory within a single HTML file.

2. Core Features

• Configurable Range: Set precise minimum and maximum bounds.
• Quantity Control: Define how many numbers to generate per batch.
• Unique/Duplicate Toggle: Option to enforce unique selections (non-repeating) or allow duplicates.
• Batch Generation: Generate multiple sets of numbers simultaneously.
• Sorting: Toggle to output numbers in ascending order (ideal for lottery tickets).
• Copy to Clipboard: One-tap functionality to copy generated sequences.
• Visual Feedback: Smooth transition animations when generating new sets.

3. UI/UX Specification

• Layout:
  • Centered primary interface card on a light-gray background (#f9fafb).
  • Sidebar or top-row configuration panel containing input fields and toggles.
  • Large, high-contrast results area with clean typography (Sans-serif).
• Color Palette:
  • Background: #ffffff
  • Primary Accent: #2563eb (Blue-600)
  • Secondary Accent: #64748b (Slate-500)
  • Text: #1e293b (Slate-800)
• Animations:
  • Use CSS transitions (transition: all 0.2s ease-in-out) for hover states on buttons.
  • Results section should use a subtle fade-in animation (opacity and transform: translateY) upon generation.

4. Technical Constraints (Strict Compliance)

• Single File: All CSS, HTML, and JS must be in one file. Use Tailwind CSS via CDN for styling.
• No Persistence: DO NOT use localStorage, sessionStorage, or cookies. State must be handled entirely in JavaScript memory. The app resets on page refresh.
• Sandboxed Compatibility: Avoid alert(), prompt(), or confirm(). Use custom modal components built with <div> and hidden classes for status messages.
• External Links: Any resource or citation must use target="_blank" rel="noopener noreferrer".

5. Implementation Directives

• JavaScript State: Maintain an object appState to hold current configuration (min, max, count, unique) and the history buffer.
• Generation Logic: Use crypto.getRandomValues() for cryptographically secure random number generation rather than Math.random() for higher quality randomness.
• Accessibility: Ensure all inputs have associated <label> elements and sufficient contrast ratios for WCAG compliance.