Free Online Bcrypt Password Hasher and Verifier

This application is a professional-grade, client-side utility designed for developers and security-conscious users to generate and verify Bcrypt hashes without requiring server-side interaction.

Technical Implementation Constraints

• Architecture: Single-file HTML (embedded CSS and JS).
• Frameworks: Vanilla JavaScript, Tailwind CSS (via CDN).
• External Libraries: bcryptjs (via CDN).
• Data Persistence: STRICTLY FORBIDDEN. No localStorage, sessionStorage, or cookies. The state must be ephemeral and in-memory.
• Compatibility: Designed to work within sandboxed iframes (no alert(), confirm(), or prompt() usage).

Feature Set

1. Bcrypt Hash Generator:
   • Input plaintext string field.
   • Salt rounds selector (range: 4-31, default: 10).
   • Real-time or triggered hash generation.
   • One-click copy functionality to copy the resulting hash to the clipboard.
2. Bcrypt Hash Verifier:
   • Input plaintext string.
   • Input existing hash string.
   • Real-time comparison display (Match/No Match visual indicator).
3. Interface Interaction:
   • Tabbed navigation (Hash vs. Verify) using smooth CSS transitions.
   • Micro-interactions on buttons (hover scaling, active states).
   • Toast-style notifications for actions (e.g., "Hash copied to clipboard!") rendered as custom HTML elements, not browser popups.

UI/UX Specification

• Layout: Centered card container (max-width: 600px) on a clean, light-grey background (#F3F4F6).
• Typography: Inter or System UI font stack. Clear hierarchy with H1 titles and muted descriptive text.
• Color Palette:
  • Primary: Indigo-600 (#4F46E5) for active buttons and accents.
  • Background: White (#FFFFFF) for the card surface.
  • Text: Slate-900 (#111827) for primary, Slate-600 (#475569) for secondary.
  • Borders: Slate-200 (#E2E8F0).
  • Success: Emerald-600 (#059669).
  • Error: Rose-600 (#E11D48).
• Visuals: Subtle shadow-lg for the card surface, rounded-xl corners, smooth transitions on all interactive states.

Developer Guidelines

• All calculations must be performed on the main thread using bcryptjs.
• Use async/await for hash generation to ensure the UI remains responsive during the computation process.
• Ensure the application is fully responsive; input fields should stack vertically on mobile devices.
• Do not include any external tracking scripts or analytics.
• All external links must have target="_blank" rel="noopener noreferrer".