🔐 Secure Note Generator & Decryptor

🔒 Encrypt Secure Notes
Password strength will appear here
🔓 Decrypt Secure Notes
What It Is
How It Works
What's It For
Instructions
Create Yourself

This is a client-side tool that lets you write a note and encrypt it with a password. It's a simple way to create a secure, shareable string of text without exposing your data on a server. Now includes a decryptor to retrieve your original messages!

The tool uses AES-GCM (Advanced Encryption Standard with Galois/Counter Mode), a modern and secure encryption algorithm, directly within your browser. This is a client-side operation, meaning your note and password never leave your device. The encrypted text is output as a Base64 string, which contains all the necessary data to decrypt it with the correct key.

Use this tool for secure, temporary storage or sharing of sensitive information. It's ideal for sending private messages, sharing temporary logins, or encrypting secrets that can be safely transmitted and later decrypted by anyone who has the correct key. Perfect for secure communication without relying on external services.

🔒 To Encrypt:

  1. Write your note in the "Note" text area
  2. Enter a strong, memorable "Encryption Key" (password)
  3. Click the "Encrypt" button
  4. Copy the encrypted Base64 string from the result
  5. Share the encrypted note safely

🔓 To Decrypt:

  1. Paste the encrypted note in the "Encrypted Note" area
  2. Enter the same key used for encryption
  3. Click "Decrypt" to reveal the original message

🛠️ Build This Tool Yourself - Step by Step

Follow these steps to create your own secure note encryption tool:

📁 Step 1: Create the HTML Structure
  1. Create a new file called secure-notes.html
  2. Add the basic HTML5 structure with DOCTYPE, html, head, and body tags
  3. Include a viewport meta tag for mobile responsiveness
  4. Create two main sections: one for encryption, one for decryption
  5. Add textarea elements for note input and encrypted output
  6. Add password input fields for encryption keys
  7. Include buttons for encrypt and decrypt actions
🎨 Step 2: Style with CSS
  1. Set up CSS custom properties (variables) for consistent colors
  2. Create a dark theme with green/cyan accent colors
  3. Use CSS Grid to create a two-column layout for desktop
  4. Add responsive design with media queries for mobile
  5. Style the input fields with dark backgrounds and colored borders
  6. Create gradient buttons with hover effects
  7. Add the matrix background canvas styling
🎬 Step 3: Matrix Background Animation
  1. Add a canvas element for the background
  2. Use JavaScript to get the canvas context
  3. Create an array of falling "drops" for the matrix effect
  4. Use requestAnimationFrame for smooth animation
  5. Draw random 0s and 1s falling down the screen
  6. Add color variation using HSL and sine waves
🔐 Step 4: Implement AES Encryption
  1. Use the Web Crypto API's crypto.subtle interface
  2. Hash the password using SHA-256 for key derivation
  3. Generate a random 12-byte IV (Initialization Vector)
  4. Import the hashed password as an AES-GCM key
  5. Encrypt the note text using crypto.subtle.encrypt()
  6. Combine IV and ciphertext into a single array
  7. Convert to Base64 for easy sharing
🔓 Step 5: Implement AES Decryption
  1. Decode the Base64 string back to bytes
  2. Extract the IV (first 12 bytes) and ciphertext (remaining bytes)
  3. Hash the password the same way as encryption
  4. Import the key for decryption
  5. Use crypto.subtle.decrypt() with the IV and key
  6. Convert the decrypted bytes back to text
  7. Handle errors for wrong passwords or corrupted data
💪 Step 6: Add Password Strength Meter
  1. Create a function to check password criteria (length, characters)
  2. Score passwords based on complexity factors
  3. Update a visual progress bar based on the score
  4. Show text feedback (Weak, Medium, Strong, etc.)
  5. Use different colors for different strength levels
📋 Step 7: Copy to Clipboard Feature
  1. Use the modern navigator.clipboard.writeText() API
  2. Add fallback for older browsers using document.execCommand
  3. Provide visual feedback when copying succeeds
  4. Handle errors gracefully
🏁 Step 8: Final Touches
  1. Add error handling for all encryption/decryption operations
  2. Clear form fields on page load for security
  3. Test with various password strengths and note lengths
  4. Ensure the tool works offline (no external dependencies)
  5. Add informational tabs explaining how it works

💡 Pro Tip: This entire tool runs client-side only! No data ever leaves the user's browser, making it completely secure and private. The Web Crypto API provides the same encryption standards used by banks and governments.