Password Strength Tester & Entropy Calculator

Overview

A high-performance, privacy-first web application designed to help users evaluate the security of their passwords. The tool provides instant, real-time feedback using the industry-standard zxcvbn algorithm. It focuses on transparency, ease of use, and complete data privacy.

Core Features

• Real-time Analysis: Feedback updates instantly as the user types.
• Visual Security Meter: A color-coded progress bar (Red, Orange, Yellow, Light Blue, Green) that visualizes password strength.
• Comprehensive Metrics:
  • Entropy (Bits): Numerical representation of the password's unpredictability.
  • Crack Time Estimator: Displays estimated time to crack for offline (slow hashing) and online (throttled) scenarios.
• Actionable Advice: Displays helpful suggestions provided by zxcvbn (e.g., "Avoid common word sequences," "Add more characters.").
• Password Generator: A secondary, optional feature to generate random, high-entropy passwords for users who need a stronger alternative.
• Show/Hide Toggle: A toggle to reveal the password text for ease of editing.

UI/UX Specification

• Layout: Centered "SaaS" style card container. Clean, professional typography (Inter or system sans-serif).
• Header: Simple application title without logos or decorative imagery.
• Input Section: Large, focus-styled text input field with a "Generate" and "Copy" button adjacent.
• Dashboard Area: Below the input, display cards for:
  • Strength Label (Very Weak to Very Strong)
  • Entropy Bit Count
  • Crack Time (Offline/Online)
• Feedback Panel: A list of bullet points for security improvement suggestions.
• Colors:
  • Background: #F9FAFB
  • Card: #FFFFFF
  • Text: #111827
  • Accents: #3B82F6 (Primary Blue), #EF4444 (Error/Low), #F59E0B (Warning), #10B981 (Success).

Technical Constraints & Implementation

• Single File: All HTML, CSS, and JS must reside in a single index.html file.
• Architecture: Vanilla JS only. No build steps. CSS via Tailwind CDN link.
• Dependencies: Use https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js via CDN.
• No Persistence: NO localStorage, sessionStorage, or Cookies. All states must be handled via memory variables.
• Sandbox Compatibility:
  • No use of alert(), confirm(), or prompt().
  • Use custom Modal components for UI alerts.
  • Ensure all external links (if any) use rel="noopener noreferrer".
• Responsive: Mobile-first design; the card should take 90% width on mobile and center-aligned max-width 600px on desktop.

Animations & Micro-interactions

• Input Focus: Subtle blue border glow.
• Strength Meter: Smooth width transitions (transition: width 0.3s ease-in-out) when strength changes.
• Text Fade: Use CSS opacity fades for feedback messages appearing/disappearing.