Bcrypt Hash Comparison and Generation Utility

Overview

This application is a dual-purpose client-side utility designed to handle Bcrypt password operations securely. It allows developers and security professionals to compare plain-text inputs against existing hashes or generate new Bcrypt hashes locally without any server-side interaction.

Core Features

• Comparison Mode: Users input a plain-text password and an existing Bcrypt hash string. The tool uses bcrypt.js to perform an instant validation, returning a clear "Match" or "No Match" status.
• Generation Mode: Users can input a plain-text password and select a workload factor (cost) to generate a secure Bcrypt hash.
• Client-Side Privacy: The application uses strictly local browser processing. No data transmits over the internet.
• Instant Feedback: Real-time validation visual indicators (green checkmarks for success, red warning indicators for failures).
• Copy-to-Clipboard: One-click functionality to copy generated hashes for easy implementation.

UI/UX Design Specification

• Layout:
  • Header: Clean, centered typography specifying the tool's function.
  • Tabs: A segmented control toggle to switch between "Compare" and "Generate" views.
  • Main Tool Area: Large, accessible input fields with floating labels.
  • Action Area: High-contrast buttons for "Validate" or "Hash Password".
  • Result Section: A distinct, rounded container that updates its background and text color based on the result (e.g., success = soft green, error = soft red).
• Color Palette:
  • Background: Off-white (#f8fafc).
  • Primary Accent: Professional Blue (#2563eb).
  • Success State: Emerald Green (#10b981).
  • Error State: Rose Red (#e11d48).
  • Text: Slate Gray (#1e293b).
• Animations:
  • Smooth fade-in transitions when switching between "Compare" and "Generate" modes.
  • Micro-interaction scale-up animation on button clicks.
  • Result messages should slide into view with a subtle easing transition.

Technical Implementation Directives

• Architecture: Must be a single, self-contained HTML file. CSS must be inside a <style> block; JavaScript must be inside a <script> block.
• Third-Party Library: Include bcrypt.js via a reputable CDN (e.g., unpkg or cdnjs).
• Storage Constraints: ABSOLUTELY NO localStorage, sessionStorage, or cookies. Use in-memory state variables only.
• Responsive: The UI must use a responsive grid or flexbox layout to ensure the input boxes stack vertically on mobile and sit side-by-side on desktop.
• Sandboxing: Do not include any external tracking scripts, analytics, or iframes that reach out to external domains (other than the required library CDN).