Spaces:
Running
Running
| Build a Single-File Static Web App for Client-Side Encryption/Decryption (Dark Mode, 10 MB limit) | |
| Absolutely Required | |
| Deliverable: A single self-contained index.html file that runs locally via file:// or any static host. | |
| No build tools, no servers, no external assets (no CDN, no Tailwind, no NPM). | |
| All HTML, CSS, and JS must be embedded in this one file (inline <style> and <script type="module">). | |
| Must work in modern Chromium/Firefox/Safari. | |
| Goal | |
| Create a modern, responsive, dark-mode single page that performs 100% client-side encryption and decryption of entered text or uploaded files (max 10 MB). No data ever leaves the browser. | |
| Cryptography (Web Crypto API only) | |
| Symmetric encryption: AES-GCM (256-bit) via window.crypto.subtle. | |
| Passphrase → key: PBKDF2/SHA-256, 16-byte random salt, ≥ 600,000 iterations (configurable). | |
| 12-byte random IV per encryption. | |
| Integrity: rely on AES-GCM auth tag; show clear success/failure on decrypt. | |
| Raw key option: if user supplies a 32-byte random key (Base64/URL-safe), skip PBKDF2 and import directly for AES-GCM. | |
| Never roll your own crypto; no third-party crypto libraries. | |
| Package/Container Format | |
| Support a compact, versioned container for both text and files. Use a Base64-armored string with a magic prefix, e.g. ENCv1: followed by Base64 of: | |
| UTF-8 JSON header (first), then a newline \n, | |
| then raw ciphertext bytes (including GCM tag). | |
| Header JSON example: | |
| { | |
| "v": 1, | |
| "alg": "AES-GCM", | |
| "kdf": {"name":"PBKDF2","hash":"SHA-256","iters":600000,"salt_b64":"..."}, | |
| "iv_b64": "...", | |
| "keyType": "passphrase|raw", | |
| "created": "2025-09-06T00:00:00Z", | |
| "type": "text|file", | |
| "orig": {"name":"report.pdf","mime":"application/pdf","size":123456} | |
| } | |
| If using a raw key: "kdf": null, "keyType":"raw". | |
| For text mode, omit or simplify "orig". | |
| UI/UX Requirements | |
| Tabs or segmented controls: Text and File modes. | |
| Text tab: textarea input; Encrypt and Decrypt; output area with copy buttons. | |
| File tab: drag-and-drop + picker; show filename/size; block > 10 MB with friendly error. | |
| On Encrypt, download a .enc file containing the armored package. | |
| On Decrypt, reconstruct original file (name/MIME from header) and download. | |
| Key input section: | |
| Field for passphrase or toggle to Generate secure key (32 random bytes → Base64/URL-safe). | |
| Provide Copy and Download .key (text) for generated keys. | |
| Clear indicators whether passphrase (PBKDF2) or raw key flow is active. | |
| Status & Progress: | |
| Progress bar/spinner for file operations; inline success/error toasts. | |
| Modern dark UI (default): | |
| Sleek, minimal, responsive layout with smooth micro-animations. | |
| Include a light/dark toggle. | |
| User Instructions (visible panel): | |
| Step-by-step: choose Text/File → enter or generate key → Encrypt/Decrypt → manage/download results. | |
| Prominent warning: “If you lose the key, you lose the data.” | |
| Advanced/Technical Header (collapsible): | |
| An accessible toggle button (aria-expanded, aria-controls). | |
| On expand, show algorithm details, PBKDF2 iteration count, salt/IV lengths, format version, and a redacted example header from the last operation. | |
| Privacy Note: | |
| “All operations occur locally in your browser. No data is uploaded.” | |
| Validation & Errors | |
| Empty inputs, missing key, size limit exceeded → user-friendly inline errors. | |
| Wrong key/corruption → “Decryption failed (wrong key or corrupted data).” | |
| Unsupported package version → clear error referencing v. | |
| Catch and display Web Crypto exceptions. | |
| Implementation Notes (Single-File Constraints) | |
| Use plain ES modules: a single <script type="module"> block in index.html. | |
| Keep secrets in memory only; no LocalStorage/IndexedDB for keys or plaintext. | |
| Provide helper functions for: | |
| deriveKeyFromPassphrase(pass, salt, iters) → CryptoKey | |
| importRawKey(base64) → CryptoKey | |
| encryptText, decryptText | |
| encryptFile, decryptFile (use Blob/ArrayBuffer, FileReader) | |
| encodePackage(headerObj, cipherBytes) → "ENCv1:...base64..." | |
| decodePackage(armored) → {header, cipherBytes} | |
| Show a short example round-trip in the Advanced panel after first success (parameters only, no secrets). | |
| Accessibility | |
| Keyboard navigable controls, visible focus states. | |
| Proper aria-* for collapsible advanced header, tab controls, and toasts/alerts. | |
| Security Footnotes (display in Advanced) | |
| Unique salt per KDF, unique IV per message. | |
| Recommend long passphrases or random 32-byte keys. | |
| Emphasize no recovery if key is lost. | |
| Clarify threat model: protects at-rest data; does not protect against a compromised device. | |
| Acceptance Criteria | |
| Ships as one index.html file; opens and works from file://. | |
| Encrypts/decrypts text and files ≤ 10 MB entirely offline. | |
| Supports both PBKDF2 passphrase and raw 32-byte key flows. | |
| Produces/consumes the specified ENCv1: Base64 format with JSON header. | |
| Dark mode by default, responsive, accessible, with a collapsible technical header. | |
| Clear errors for wrong key, bad format, or size over limit. | |
| Now implement the entire app in a single self-contained index.html with inline CSS and JS (no external resources). Include helpful comments in code. | |
| UI/UX Overhaul for Single-File Client-Side Crypto App (Dark Mode First) | |
| Goal | |
| Redesign the existing single-file (index.html) app into a sleek, premium, dark-mode-first experience with refined typography, spacing, motion, and states—without adding any external assets (no CDNs, fonts, icon packs, or JS libs). Keep all HTML/CSS/JS inline. Maintain all current crypto features and flows. | |
| Design System (define in :root and support dark/light) | |
| Color tokens (WCAG AA for text): | |
| --bg: #0b0f14, --bg-elev: #121720, --panel: #161c27, --muted: #8ba2b0 | |
| Accents (choose one primary; compute focus/hover variants): | |
| --pri: #7dd3fc (sky), --pri-600: #38bdf8, --pri-700: #0ea5e9 | |
| Semantic: | |
| --ok: #34d399, --warn: #fbbf24, --err: #f87171, --info: #60a5fa | |
| Typography (system stack; no external fonts): | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; | |
| Scale: --text-xs: 12px, --sm: 14px, --base: 16px, --lg: 18px, --xl: 20px, --2xl: 24px | |
| Line-height: 1.5 text, 1.2 headings. Tighten letter-spacing on headings. | |
| Radii & Shadows: | |
| --r: 14px panels, --r-sm: 10px inputs, --r-pill: 999px | |
| Soft shadows: --shadow-1: 0 2px 10px rgba(0,0,0,.25), --shadow-2: 0 10px 30px rgba(0,0,0,.35) | |
| Spacing (8-pt grid): | |
| --sp-1: 8px, --sp-2: 12px, --sp-3: 16px, --sp-4: 20px, --sp-5: 24px, --sp-6: 32px | |
| Light mode: implement via .theme-light (class on <html>) or @media (prefers-color-scheme: light) overrides. | |
| Layout & Components | |
| Header (sticky) | |
| App name + small tagline; right side: Theme toggle, Advanced panel toggle (accordion link), GitHub-like inline badges for “AES-GCM 256”, “PBKDF2 600k”, “10 MB”. | |
| Use subtle glassmorphism: backdrop blur on header with backdrop-filter: blur(8px); background: rgba(18,23,32,.6); border: 1px solid rgba(255,255,255,.06); | |
| Hero strip | |
| Two-line intro with tiny privacy note: “100% client-side · no uploads”. | |
| Tabs (Text | File) | |
| Segmented control with pill buttons; active tab has inner glow. | |
| Smooth underline animation on active tab. | |
| Cards | |
| Split layout for each tab: | |
| Left card: input (textarea or dropzone). | |
| Right card: output/result with copy + download actions. | |
| Cards use --panel background, rounded corners, soft shadow, generous padding. | |
| Inputs | |
| Minimal “borderless” fields with 1px hairline on focus; large click targets. | |
| Password/Key area with show/hide toggle and copy button. | |
| Key generation presented in a modal sheet (see below). | |
| Drag & drop zone (File tab) | |
| Dotted rounded border, hover elevation, icon (inline SVG), file details preview (name, size, type), and size-limit helper. | |
| Primary actions | |
| “Encrypt” and “Decrypt” as large pill buttons with icon + label; animated hover (elevate + slight glow). Disable when invalid. | |
| Status & Progress | |
| Progress bar (indeterminate → determinate for files), inline toast notifications (top-right) with semantic colors; auto-dismiss + manual close. | |
| Advanced panel | |
| Collapsible below header; animate height with max-height + opacity and aria-expanded. Show algorithm details, parameters from last run, and a redacted JSON header rendered in a code block with syntax-like styling. | |
| Modal: “Generate Secure Key” | |
| Centered sheet with blur backdrop; explains raw vs passphrase, lets user choose 32-byte random key; shows Base64 key with copy + download and “Use this key” button. | |
| Motion & Interactions | |
| Respect prefers-reduced-motion: reduce. | |
| Use subtle micro-interactions: | |
| 150–220ms transitions on hover/focus/elevation. | |
| Button press scale to 0.98; focus ring using box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 35%, transparent); | |
| Tab switch: fade/slide content (120–180ms). | |
| Toasts: slide-in from top-right, fade out on dismiss. | |
| Accessibility | |
| All interactive elements have visible focus outlines, proper roles/labels, and aria-live="polite" for toasts. | |
| Accordion toggles use buttons with aria-controls/aria-expanded. | |
| Sufficient color contrast (≥ 4.5:1 for body text). | |
| Key field supports paste, reveal, and screen reader labels. | |
| Visual Polish Checklist | |
| Align content to a max-width container (e.g., 1100–1200px) centered; generous vertical rhythm. | |
| Consistent iconography with inline SVGs (stroke-width 1.75–2). | |
| Code blocks use mono system font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| Use subtle separators with linear-gradient hairlines instead of harsh borders. | |
| Empty states with friendly copy + ghost illustrations (simple inline SVG shapes). | |
| Implementation Tasks | |
| Refactor CSS into variables + small utility classes: | |
| .btn, .btn--primary, .btn--ghost, .card, .input, .kbd, .badge, .toast, .dropzone, .progress, .sr-only. | |
| Add Theme Toggle | |
| Toggle adds/removes .theme-light on <html>; remember only the theme in localStorage (keep crypto secrets out of storage). | |
| Key Modal | |
| Implement as hidden div; open/close via class; trap focus while open; ESC closes. | |
| Toasts API | |
| notify(type, message) creates/removes toasts; stacked layout; role="status". | |
| Advanced Panel | |
| Populate with live parameters from last operation (iters, salt length, IV length, alg, version). Show a copyable redacted header sample. | |
| Validation States | |
| Inputs get .is-invalid class → subtle red ring + helper text. | |
| Disable primary buttons until all requirements met. | |
| Don’ts | |
| No external fonts, icon libraries, or CSS frameworks. | |
| No heavy animations or parallax. | |
| Don’t store keys/plaintext anywhere persistent. | |
| Acceptance Criteria | |
| Still a single self-contained index.html (inline CSS/JS). | |
| Dark mode by default; light mode toggle works and persists (theme only). | |
| Clear, premium visuals: glassy header, elegant cards, tasteful motion, crisp focus states. | |
| Keyboard navigable, screen-reader friendly, WCAG AA contrast. | |
| Polished progress, toasts, modal, and drag-drop interactions. | |
| All current crypto features continue to function unchanged. | |
| Optional Nice-to-Haves (if time allows) | |
| Tiny onboarding tip (dismissible) near tabs. | |
| Quick actions row: “Paste key”, “Copy result”, “Clear all”. | |
| Mini checksum preview (e.g., SHA-256 of ciphertext) in Advanced panel. | |
| Proceed to implement the visual overhaul now. Keep everything in a single static HTML file and include clear comments explaining structure and style tokens. | |
| Please improve the user interface by making it more modern and slick and aesthetically pleasing | |
| UI/UX Overhaul for Single-File Client-Side Crypto App (Dark Mode First) | |
| Goal | |
| Redesign the existing single-file (index.html) app into a sleek, premium, dark-mode-first experience with refined typography, spacing, motion, and states—without adding any external assets (no CDNs, fonts, icon packs, or JS libs). Keep all HTML/CSS/JS inline. Maintain all current crypto features and flows. | |
| Design System (define in :root and support dark/light) | |
| Color tokens (WCAG AA for text): | |
| --bg: #0b0f14, --bg-elev: #121720, --panel: #161c27, --muted: #8ba2b0 | |
| Accents (choose one primary; compute focus/hover variants): | |
| --pri: #7dd3fc (sky), --pri-600: #38bdf8, --pri-700: #0ea5e9 | |
| Semantic: | |
| --ok: #34d399, --warn: #fbbf24, --err: #f87171, --info: #60a5fa | |
| Typography (system stack; no external fonts): | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; | |
| Scale: --text-xs: 12px, --sm: 14px, --base: 16px, --lg: 18px, --xl: 20px, --2xl: 24px | |
| Line-height: 1.5 text, 1.2 headings. Tighten letter-spacing on headings. | |
| Radii & Shadows: | |
| --r: 14px panels, --r-sm: 10px inputs, --r-pill: 999px | |
| Soft shadows: --shadow-1: 0 2px 10px rgba(0,0,0,.25), --shadow-2: 0 10px 30px rgba(0,0,0,.35) | |
| Spacing (8-pt grid): | |
| --sp-1: 8px, --sp-2: 12px, --sp-3: 16px, --sp-4: 20px, --sp-5: 24px, --sp-6: 32px | |
| Light mode: implement via .theme-light (class on <html>) or @media (prefers-color-scheme: light) overrides. | |
| Layout & Components | |
| Header (sticky) | |
| App name + small tagline; right side: Theme toggle, Advanced panel toggle (accordion link), GitHub-like inline badges for “AES-GCM 256”, “PBKDF2 600k”, “10 MB”. | |
| Use subtle glassmorphism: backdrop blur on header with backdrop-filter: blur(8px); background: rgba(18,23,32,.6); border: 1px solid rgba(255,255,255,.06); | |
| Hero strip | |
| Two-line intro with tiny privacy note: “100% client-side · no uploads”. | |
| Tabs (Text | File) | |
| Segmented control with pill buttons; active tab has inner glow. | |
| Smooth underline animation on active tab. | |
| Cards | |
| Split layout for each tab: | |
| Left card: input (textarea or dropzone). | |
| Right card: output/result with copy + download actions. | |
| Cards use --panel background, rounded corners, soft shadow, generous padding. | |
| Inputs | |
| Minimal “borderless” fields with 1px hairline on focus; large click targets. | |
| Password/Key area with show/hide toggle and copy button. | |
| Key generation presented in a modal sheet (see below). | |
| Drag & drop zone (File tab) | |
| Dotted rounded border, hover elevation, icon (inline SVG), file details preview (name, size, type), and size-limit helper. | |
| Primary actions | |
| “Encrypt” and “Decrypt” as large pill buttons with icon + label; animated hover (elevate + slight glow). Disable when invalid. | |
| Status & Progress | |
| Progress bar (indeterminate → determinate for files), inline toast notifications (top-right) with semantic colors; auto-dismiss + manual close. | |
| Advanced panel | |
| Collapsible below header; animate height with max-height + opacity and aria-expanded. Show algorithm details, parameters from last run, and a redacted JSON header rendered in a code block with syntax-like styling. | |
| Modal: “Generate Secure Key” | |
| Centered sheet with blur backdrop; explains raw vs passphrase, lets user choose 32-byte random key; shows Base64 key with copy + download and “Use this key” button. | |
| Motion & Interactions | |
| Respect prefers-reduced-motion: reduce. | |
| Use subtle micro-interactions: | |
| 150–220ms transitions on hover/focus/elevation. | |
| Button press scale to 0.98; focus ring using box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 35%, transparent); | |
| Tab switch: fade/slide content (120–180ms). | |
| Toasts: slide-in from top-right, fade out on dismiss. | |
| Accessibility | |
| All interactive elements have visible focus outlines, proper roles/labels, and aria-live="polite" for toasts. | |
| Accordion toggles use buttons with aria-controls/aria-expanded. | |
| Sufficient color contrast (≥ 4.5:1 for body text). | |
| Key field supports paste, reveal, and screen reader labels. | |
| Visual Polish Checklist | |
| Align content to a max-width container (e.g., 1100–1200px) centered; generous vertical rhythm. | |
| Consistent iconography with inline SVGs (stroke-width 1.75–2). | |
| Code blocks use mono system font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| Use subtle separators with linear-gradient hairlines instead of harsh borders. | |
| Empty states with friendly copy + ghost illustrations (simple inline SVG shapes). | |
| Implementation Tasks | |
| Refactor CSS into variables + small utility classes: | |
| .btn, .btn--primary, .btn--ghost, .card, .input, .kbd, .badge, .toast, .dropzone, .progress, .sr-only. | |
| Add Theme Toggle | |
| Toggle adds/removes .theme-light on <html>; remember only the theme in localStorage (keep crypto secrets out of storage). | |
| Key Modal | |
| Implement as hidden div; open/close via class; trap focus while open; ESC closes. | |
| Toasts API | |
| notify(type, message) creates/removes toasts; stacked layout; role="status". | |
| Advanced Panel | |
| Populate with live parameters from last operation (iters, salt length, IV length, alg, version). Show a copyable redacted header sample. | |
| Validation States | |
| Inputs get .is-invalid class → subtle red ring + helper text. | |
| Disable primary buttons until all requirements met. | |
| Don’ts | |
| No external fonts, icon libraries, or CSS frameworks. | |
| No heavy animations or parallax. | |
| Don’t store keys/plaintext anywhere persistent. | |
| Acceptance Criteria | |
| Still a single self-contained index.html (inline CSS/JS). | |
| Dark mode by default; light mode toggle works and persists (theme only). | |
| Clear, premium visuals: glassy header, elegant cards, tasteful motion, crisp focus states. | |
| Keyboard navigable, screen-reader friendly, WCAG AA contrast. | |
| Polished progress, toasts, modal, and drag-drop interactions. | |
| All current crypto features continue to function unchanged. | |
| Optional Nice-to-Haves (if time allows) | |
| Tiny onboarding tip (dismissible) near tabs. | |
| Quick actions row: “Paste key”, “Copy result”, “Clear all”. | |
| Mini checksum preview (e.g., SHA-256 of ciphertext) in Advanced panel. | |
| Proceed to implement the visual overhaul now. Keep everything in a single static HTML file and include clear comments explaining structure and style tokens. | |
| UI/UX Overhaul for Single-File Client-Side Crypto App (Dark Mode First) | |
| Goal | |
| Redesign the existing single-file (index.html) app into a sleek, premium, dark-mode-first experience with refined typography, spacing, motion, and states—without adding any external assets (no CDNs, fonts, icon packs, or JS libs). Keep all HTML/CSS/JS inline. Maintain all current crypto features and flows. | |
| Design System (define in :root and support dark/light) | |
| Color tokens (WCAG AA for text): | |
| --bg: #0b0f14, --bg-elev: #121720, --panel: #161c27, --muted: #8ba2b0 | |
| Accents (choose one primary; compute focus/hover variants): | |
| --pri: #7dd3fc (sky), --pri-600: #38bdf8, --pri-700: #0ea5e9 | |
| Semantic: | |
| --ok: #34d399, --warn: #fbbf24, --err: #f87171, --info: #60a5fa | |
| Typography (system stack; no external fonts): | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; | |
| Scale: --text-xs: 12px, --sm: 14px, --base: 16px, --lg: 18px, --xl: 20px, --2xl: 24px | |
| Line-height: 1.5 text, 1.2 headings. Tighten letter-spacing on headings. | |
| Radii & Shadows: | |
| --r: 14px panels, --r-sm: 10px inputs, --r-pill: 999px | |
| Soft shadows: --shadow-1: 0 2px 10px rgba(0,0,0,.25), --shadow-2: 0 10px 30px rgba(0,0,0,.35) | |
| Spacing (8-pt grid): | |
| --sp-1: 8px, --sp-2: 12px, --sp-3: 16px, --sp-4: 20px, --sp-5: 24px, --sp-6: 32px | |
| Light mode: implement via .theme-light (class on <html>) or @media (prefers-color-scheme: light) overrides. | |
| Layout & Components | |
| Header (sticky) | |
| App name + small tagline; right side: Theme toggle, Advanced panel toggle (accordion link), GitHub-like inline badges for “AES-GCM 256”, “PBKDF2 600k”, “10 MB”. | |
| Use subtle glassmorphism: backdrop blur on header with backdrop-filter: blur(8px); background: rgba(18,23,32,.6); border: 1px solid rgba(255,255,255,.06); | |
| Hero strip | |
| Two-line intro with tiny privacy note: “100% client-side · no uploads”. | |
| Tabs (Text | File) | |
| Segmented control with pill buttons; active tab has inner glow. | |
| Smooth underline animation on active tab. | |
| Cards | |
| Split layout for each tab: | |
| Left card: input (textarea or dropzone). | |
| Right card: output/result with copy + download actions. | |
| Cards use --panel background, rounded corners, soft shadow, generous padding. | |
| Inputs | |
| Minimal “borderless” fields with 1px hairline on focus; large click targets. | |
| Password/Key area with show/hide toggle and copy button. | |
| Key generation presented in a modal sheet (see below). | |
| Drag & drop zone (File tab) | |
| Dotted rounded border, hover elevation, icon (inline SVG), file details preview (name, size, type), and size-limit helper. | |
| Primary actions | |
| “Encrypt” and “Decrypt” as large pill buttons with icon + label; animated hover (elevate + slight glow). Disable when invalid. | |
| Status & Progress | |
| Progress bar (indeterminate → determinate for files), inline toast notifications (top-right) with semantic colors; auto-dismiss + manual close. | |
| Advanced panel | |
| Collapsible below header; animate height with max-height + opacity and aria-expanded. Show algorithm details, parameters from last run, and a redacted JSON header rendered in a code block with syntax-like styling. | |
| Modal: “Generate Secure Key” | |
| Centered sheet with blur backdrop; explains raw vs passphrase, lets user choose 32-byte random key; shows Base64 key with copy + download and “Use this key” button. | |
| Motion & Interactions | |
| Respect prefers-reduced-motion: reduce. | |
| Use subtle micro-interactions: | |
| 150–220ms transitions on hover/focus/elevation. | |
| Button press scale to 0.98; focus ring using box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 35%, transparent); | |
| Tab switch: fade/slide content (120–180ms). | |
| Toasts: slide-in from top-right, fade out on dismiss. | |
| Accessibility | |
| All interactive elements have visible focus outlines, proper roles/labels, and aria-live="polite" for toasts. | |
| Accordion toggles use buttons with aria-controls/aria-expanded. | |
| Sufficient color contrast (≥ 4.5:1 for body text). | |
| Key field supports paste, reveal, and screen reader labels. | |
| Visual Polish Checklist | |
| Align content to a max-width container (e.g., 1100–1200px) centered; generous vertical rhythm. | |
| Consistent iconography with inline SVGs (stroke-width 1.75–2). | |
| Code blocks use mono system font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| Use subtle separators with linear-gradient hairlines instead of harsh borders. | |
| Empty states with friendly copy + ghost illustrations (simple inline SVG shapes). | |
| Implementation Tasks | |
| Refactor CSS into variables + small utility classes: | |
| .btn, .btn--primary, .btn--ghost, .card, .input, .kbd, .badge, .toast, .dropzone, .progress, .sr-only. | |
| Add Theme Toggle | |
| Toggle adds/removes .theme-light on <html>; remember only the theme in localStorage (keep crypto secrets out of storage). | |
| Key Modal | |
| Implement as hidden div; open/close via class; trap focus while open; ESC closes. | |
| Toasts API | |
| notify(type, message) creates/removes toasts; stacked layout; role="status". | |
| Advanced Panel | |
| Populate with live parameters from last operation (iters, salt length, IV length, alg, version). Show a copyable redacted header sample. | |
| Validation States | |
| Inputs get .is-invalid class → subtle red ring + helper text. | |
| Disable primary buttons until all requirements met. | |
| Don’ts | |
| No external fonts, icon libraries, or CSS frameworks. | |
| No heavy animations or parallax. | |
| Don’t store keys/plaintext anywhere persistent. | |
| Acceptance Criteria | |
| Still a single self-contained index.html (inline CSS/JS). | |
| Dark mode by default; light mode toggle works and persists (theme only). | |
| Clear, premium visuals: glassy header, elegant cards, tasteful motion, crisp focus states. | |
| Keyboard navigable, screen-reader friendly, WCAG AA contrast. | |
| Polished progress, toasts, modal, and drag-drop interactions. | |
| All current crypto features continue to function unchanged. | |
| Optional Nice-to-Haves (if time allows) | |
| Tiny onboarding tip (dismissible) near tabs. | |
| Quick actions row: “Paste key”, “Copy result”, “Clear all”. | |
| Mini checksum preview (e.g., SHA-256 of ciphertext) in Advanced panel. | |
| Proceed to implement the visual overhaul now. Keep everything in a single static HTML file and include clear comments explaining structure and style tokens. | |
| UI/UX Overhaul for Single-File Client-Side Crypto App (Dark Mode First) | |
| Goal | |
| Redesign the existing single-file (index.html) app into a sleek, premium, dark-mode-first experience with refined typography, spacing, motion, and states—without adding any external assets (no CDNs, fonts, icon packs, or JS libs). Keep all HTML/CSS/JS inline. Maintain all current crypto features and flows. | |
| Design System (define in :root and support dark/light) | |
| Color tokens (WCAG AA for text): | |
| --bg: #0b0f14, --bg-elev: #121720, --panel: #161c27, --muted: #8ba2b0 | |
| Accents (choose one primary; compute focus/hover variants): | |
| --pri: #7dd3fc (sky), --pri-600: #38bdf8, --pri-700: #0ea5e9 | |
| Semantic: | |
| --ok: #34d399, --warn: #fbbf24, --err: #f87171, --info: #60a5fa | |
| Typography (system stack; no external fonts): | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; | |
| Scale: --text-xs: 12px, --sm: 14px, --base: 16px, --lg: 18px, --xl: 20px, --2xl: 24px | |
| Line-height: 1.5 text, 1.2 headings. Tighten letter-spacing on headings. | |
| Radii & Shadows: | |
| --r: 14px panels, --r-sm: 10px inputs, --r-pill: 999px | |
| Soft shadows: --shadow-1: 0 2px 10px rgba(0,0,0,.25), --shadow-2: 0 10px 30px rgba(0,0,0,.35) | |
| Spacing (8-pt grid): | |
| --sp-1: 8px, --sp-2: 12px, --sp-3: 16px, --sp-4: 20px, --sp-5: 24px, --sp-6: 32px | |
| Light mode: implement via .theme-light (class on <html>) or @media (prefers-color-scheme: light) overrides. | |
| Layout & Components | |
| Header (sticky) | |
| App name + small tagline; right side: Theme toggle, Advanced panel toggle (accordion link), GitHub-like inline badges for “AES-GCM 256”, “PBKDF2 600k”, “10 MB”. | |
| Use subtle glassmorphism: backdrop blur on header with backdrop-filter: blur(8px); background: rgba(18,23,32,.6); border: 1px solid rgba(255,255,255,.06); | |
| Hero strip | |
| Two-line intro with tiny privacy note: “100% client-side · no uploads”. | |
| Tabs (Text | File) | |
| Segmented control with pill buttons; active tab has inner glow. | |
| Smooth underline animation on active tab. | |
| Cards | |
| Split layout for each tab: | |
| Left card: input (textarea or dropzone). | |
| Right card: output/result with copy + download actions. | |
| Cards use --panel background, rounded corners, soft shadow, generous padding. | |
| Inputs | |
| Minimal “borderless” fields with 1px hairline on focus; large click targets. | |
| Password/Key area with show/hide toggle and copy button. | |
| Key generation presented in a modal sheet (see below). | |
| Drag & drop zone (File tab) | |
| Dotted rounded border, hover elevation, icon (inline SVG), file details preview (name, size, type), and size-limit helper. | |
| Primary actions | |
| “Encrypt” and “Decrypt” as large pill buttons with icon + label; animated hover (elevate + slight glow). Disable when invalid. | |
| Status & Progress | |
| Progress bar (indeterminate → determinate for files), inline toast notifications (top-right) with semantic colors; auto-dismiss + manual close. | |
| Advanced panel | |
| Collapsible below header; animate height with max-height + opacity and aria-expanded. Show algorithm details, parameters from last run, and a redacted JSON header rendered in a code block with syntax-like styling. | |
| Modal: “Generate Secure Key” | |
| Centered sheet with blur backdrop; explains raw vs passphrase, lets user choose 32-byte random key; shows Base64 key with copy + download and “Use this key” button. | |
| Motion & Interactions | |
| Respect prefers-reduced-motion: reduce. | |
| Use subtle micro-interactions: | |
| 150–220ms transitions on hover/focus/elevation. | |
| Button press scale to 0.98; focus ring using box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri) 35%, transparent); | |
| Tab switch: fade/slide content (120–180ms). | |
| Toasts: slide-in from top-right, fade out on dismiss. | |
| Accessibility | |
| All interactive elements have visible focus outlines, proper roles/labels, and aria-live="polite" for toasts. | |
| Accordion toggles use buttons with aria-controls/aria-expanded. | |
| Sufficient color contrast (≥ 4.5:1 for body text). | |
| Key field supports paste, reveal, and screen reader labels. | |
| Visual Polish Checklist | |
| Align content to a max-width container (e.g., 1100–1200px) centered; generous vertical rhythm. | |
| Consistent iconography with inline SVGs (stroke-width 1.75–2). | |
| Code blocks use mono system font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| Use subtle separators with linear-gradient hairlines instead of harsh borders. | |
| Empty states with friendly copy + ghost illustrations (simple inline SVG shapes). | |
| Implementation Tasks | |
| Refactor CSS into variables + small utility classes: | |
| .btn, .btn--primary, .btn--ghost, .card, .input, .kbd, .badge, .toast, .dropzone, .progress, .sr-only. | |
| Add Theme Toggle | |
| Toggle adds/removes .theme-light on <html>; remember only the theme in localStorage (keep crypto secrets out of storage). | |
| Key Modal | |
| Implement as hidden div; open/close via class; trap focus while open; ESC closes. | |
| Toasts API | |
| notify(type, message) creates/removes toasts; stacked layout; role="status". | |
| Advanced Panel | |
| Populate with live parameters from last operation (iters, salt length, IV length, alg, version). Show a copyable redacted header sample. | |
| Validation States | |
| Inputs get .is-invalid class → subtle red ring + helper text. | |
| Disable primary buttons until all requirements met. | |
| Don’ts | |
| No external fonts, icon libraries, or CSS frameworks. | |
| No heavy animations or parallax. | |
| Don’t store keys/plaintext anywhere persistent. | |
| Acceptance Criteria | |
| Still a single self-contained index.html (inline CSS/JS). | |
| Dark mode by default; light mode toggle works and persists (theme only). | |
| Clear, premium visuals: glassy header, elegant cards, tasteful motion, crisp focus states. | |
| Keyboard navigable, screen-reader friendly, WCAG AA contrast. | |
| Polished progress, toasts, modal, and drag-drop interactions. | |
| All current crypto features continue to function unchanged. | |
| Optional Nice-to-Haves (if time allows) | |
| Tiny onboarding tip (dismissible) near tabs. | |
| Quick actions row: “Paste key”, “Copy result”, “Clear all”. | |
| Mini checksum preview (e.g., SHA-256 of ciphertext) in Advanced panel. | |
| Proceed to implement the visual overhaul now. Keep everything in a single static HTML file and include clear comments explaining structure and style tokens. | |
| Build a Single-File Static Web App for Client-Side Encryption/Decryption (Dark Mode, 10 MB limit) | |
| Absolutely Required | |
| Deliverable: A single self-contained index.html file that runs locally via file:// or any static host. | |
| No build tools, no servers, no external assets (no CDN, no Tailwind, no NPM). | |
| All HTML, CSS, and JS must be embedded in this one file (inline <style> and <script type="module">). | |
| Must work in modern Chromium/Firefox/Safari. | |
| Goal | |
| Create a modern, responsive, dark-mode single page that performs 100% client-side encryption and decryption of entered text or uploaded files (max 10 MB). No data ever leaves the browser. | |
| Cryptography (Web Crypto API only) | |
| Symmetric encryption: AES-GCM (256-bit) via window.crypto.subtle. | |
| Passphrase → key: PBKDF2/SHA-256, 16-byte random salt, ≥ 600,000 iterations (configurable). | |
| 12-byte random IV per encryption. | |
| Integrity: rely on AES-GCM auth tag; show clear success/failure on decrypt. | |
| Raw key option: if user supplies a 32-byte random key (Base64/URL-safe), skip PBKDF2 and import directly for AES-GCM. | |
| Never roll your own crypto; no third-party crypto libraries. | |
| Package/Container Format | |
| Support a compact, versioned container for both text and files. Use a Base64-armored string with a magic prefix, e.g. ENCv1: followed by Base64 of: | |
| UTF-8 JSON header (first), then a newline \n, | |
| then raw ciphertext bytes (including GCM tag). | |
| Header JSON example: | |
| { | |
| "v": 1, | |
| "alg": "AES-GCM", | |
| "kdf": {"name":"PBKDF2","hash":"SHA-256","iters":600000,"salt_b64":"..."}, | |
| "iv_b64": "...", | |
| "keyType": "passphrase|raw", | |
| "created": "2025-09-06T00:00:00Z", | |
| "type": "text|file", | |
| "orig": {"name":"report.pdf","mime":"application/pdf","size":123456} | |
| } | |
| If using a raw key: "kdf": null, "keyType":"raw". | |
| For text mode, omit or simplify "orig". | |
| UI/UX Requirements | |
| Tabs or segmented controls: Text and File modes. | |
| Text tab: textarea input; Encrypt and Decrypt; output area with copy buttons. | |
| File tab: drag-and-drop + picker; show filename/size; block > 10 MB with friendly error. | |
| On Encrypt, download a .enc file containing the armored package. | |
| On Decrypt, reconstruct original file (name/MIME from header) and download. | |
| Key input section: | |
| Field for passphrase or toggle to Generate secure key (32 random bytes → Base64/URL-safe). | |
| Provide Copy and Download .key (text) for generated keys. | |
| Clear indicators whether passphrase (PBKDF2) or raw key flow is active. | |
| Status & Progress: | |
| Progress bar/spinner for file operations; inline success/error toasts. | |
| Modern dark UI (default): | |
| Sleek, minimal, responsive layout with smooth micro-animations. | |
| Include a light/dark toggle. | |
| User Instructions (visible panel): | |
| Step-by-step: choose Text/File → enter or generate key → Encrypt/Decrypt → manage/download results. | |
| Prominent warning: “If you lose the key, you lose the data.” | |
| Advanced/Technical Header (collapsible): | |
| An accessible toggle button (aria-expanded, aria-controls). | |
| On expand, show algorithm details, PBKDF2 iteration count, salt/IV lengths, format version, and a redacted example header from the last operation. | |
| Privacy Note: | |
| “All operations occur locally in your browser. No data is uploaded.” | |
| Validation & Errors | |
| Empty inputs, missing key, size limit exceeded → user-friendly inline errors. | |
| Wrong key/corruption → “Decryption failed (wrong key or corrupted data).” | |
| Unsupported package version → clear error referencing v. | |
| Catch and display Web Crypto exceptions. | |
| Implementation Notes (Single-File Constraints) | |
| Use plain ES modules: a single <script type="module"> block in index.html. | |
| Keep secrets in memory only; no LocalStorage/IndexedDB for keys or plaintext. | |
| Provide helper functions for: | |
| deriveKeyFromPassphrase(pass, salt, iters) → CryptoKey | |
| importRawKey(base64) → CryptoKey | |
| encryptText, decryptText | |
| encryptFile, decryptFile (use Blob/ArrayBuffer, FileReader) | |
| encodePackage(headerObj, cipherBytes) → "ENCv1:...base64..." | |
| decodePackage(armored) → {header, cipherBytes} | |
| Show a short example round-trip in the Advanced panel after first success (parameters only, no secrets). | |
| Accessibility | |
| Keyboard navigable controls, visible focus states. | |
| Proper aria-* for collapsible advanced header, tab controls, and toasts/alerts. | |
| Security Footnotes (display in Advanced) | |
| Unique salt per KDF, unique IV per message. | |
| Recommend long passphrases or random 32-byte keys. | |
| Emphasize no recovery if key is lost. | |
| Clarify threat model: protects at-rest data; does not protect against a compromised device. | |
| Acceptance Criteria | |
| Ships as one index.html file; opens and works from file://. | |
| Encrypts/decrypts text and files ≤ 10 MB entirely offline. | |
| Supports both PBKDF2 passphrase and raw 32-byte key flows. | |
| Produces/consumes the specified ENCv1: Base64 format with JSON header. | |
| Dark mode by default, responsive, accessible, with a collapsible technical header. | |
| Clear errors for wrong key, bad format, or size over limit. | |
| Now implement the entire app in a single self-contained index.html with inline CSS and JS (no external resources). Include helpful comments in code. | |
| Build a Single-File Static Web App for Client-Side Encryption/Decryption (Dark Mode, 10 MB limit) | |
| Absolutely Required | |
| Deliverable: A single self-contained index.html file that runs locally via file:// or any static host. | |
| No build tools, no servers, no external assets (no CDN, no Tailwind, no NPM). | |
| All HTML, CSS, and JS must be embedded in this one file (inline <style> and <script type="module">). | |
| Must work in modern Chromium/Firefox/Safari. | |
| Goal | |
| Create a modern, responsive, dark-mode single page that performs 100% client-side encryption and decryption of entered text or uploaded files (max 10 MB). No data ever leaves the browser. | |
| Cryptography (Web Crypto API only) | |
| Symmetric encryption: AES-GCM (256-bit) via window.crypto.subtle. | |
| Passphrase → key: PBKDF2/SHA-256, 16-byte random salt, ≥ 600,000 iterations (configurable). | |
| 12-byte random IV per encryption. | |
| Integrity: rely on AES-GCM auth tag; show clear success/failure on decrypt. | |
| Raw key option: if user supplies a 32-byte random key (Base64/URL-safe), skip PBKDF2 and import directly for AES-GCM. | |
| Never roll your own crypto; no third-party crypto libraries. | |
| Package/Container Format | |
| Support a compact, versioned container for both text and files. Use a Base64-armored string with a magic prefix, e.g. ENCv1: followed by Base64 of: | |
| UTF-8 JSON header (first), then a newline \n, | |
| then raw ciphertext bytes (including GCM tag). | |
| Header JSON example: | |
| { | |
| "v": 1, | |
| "alg": "AES-GCM", | |
| "kdf": {"name":"PBKDF2","hash":"SHA-256","iters":600000,"salt_b64":"..."}, | |
| "iv_b64": "...", | |
| "keyType": "passphrase|raw", | |
| "created": "2025-09-06T00:00:00Z", | |
| "type": "text|file", | |
| "orig": {"name":"report.pdf","mime":"application/pdf","size":123456} | |
| } | |
| If using a raw key: "kdf": null, "keyType":"raw". | |
| For text mode, omit or simplify "orig". | |
| UI/UX Requirements | |
| Tabs or segmented controls: Text and File modes. | |
| Text tab: textarea input; Encrypt and Decrypt; output area with copy buttons. | |
| File tab: drag-and-drop + picker; show filename/size; block > 10 MB with friendly error. | |
| On Encrypt, download a .enc file containing the armored package. | |
| On Decrypt, reconstruct original file (name/MIME from header) and download. | |
| Key input section: | |
| Field for passphrase or toggle to Generate secure key (32 random bytes → Base64/URL-safe). | |
| Provide Copy and Download .key (text) for generated keys. | |
| Clear indicators whether passphrase (PBKDF2) or raw key flow is active. | |
| Status & Progress: | |
| Progress bar/spinner for file operations; inline success/error toasts. | |
| Modern dark UI (default): | |
| Sleek, minimal, responsive layout with smooth micro-animations. | |
| Include a light/dark toggle. | |
| User Instructions (visible panel): | |
| Step-by-step: choose Text/File → enter or generate key → Encrypt/Decrypt → manage/download results. | |
| Prominent warning: “If you lose the key, you lose the data.” | |
| Advanced/Technical Header (collapsible): | |
| An accessible toggle button (aria-expanded, aria-controls). | |
| On expand, show algorithm details, PBKDF2 iteration count, salt/IV lengths, format version, and a redacted example header from the last operation. | |
| Privacy Note: | |
| “All operations occur locally in your browser. No data is uploaded.” | |
| Validation & Errors | |
| Empty inputs, missing key, size limit exceeded → user-friendly inline errors. | |
| Wrong key/corruption → “Decryption failed (wrong key or corrupted data).” | |
| Unsupported package version → clear error referencing v. | |
| Catch and display Web Crypto exceptions. | |
| Implementation Notes (Single-File Constraints) | |
| Use plain ES modules: a single <script type="module"> block in index.html. | |
| Keep secrets in memory only; no LocalStorage/IndexedDB for keys or plaintext. | |
| Provide helper functions for: | |
| deriveKeyFromPassphrase(pass, salt, iters) → CryptoKey | |
| importRawKey(base64) → CryptoKey | |
| encryptText, decryptText | |
| encryptFile, decryptFile (use Blob/ArrayBuffer, FileReader) | |
| encodePackage(headerObj, cipherBytes) → "ENCv1:...base64..." | |
| decodePackage(armored) → {header, cipherBytes} | |
| Show a short example round-trip in the Advanced panel after first success (parameters only, no secrets). | |
| Accessibility | |
| Keyboard navigable controls, visible focus states. | |
| Proper aria-* for collapsible advanced header, tab controls, and toasts/alerts. | |
| Security Footnotes (display in Advanced) | |
| Unique salt per KDF, unique IV per message. | |
| Recommend long passphrases or random 32-byte keys. | |
| Emphasize no recovery if key is lost. | |
| Clarify threat model: protects at-rest data; does not protect against a compromised device. | |
| Acceptance Criteria | |
| Ships as one index.html file; opens and works from file://. | |
| Encrypts/decrypts text and files ≤ 10 MB entirely offline. | |
| Supports both PBKDF2 passphrase and raw 32-byte key flows. | |
| Produces/consumes the specified ENCv1: Base64 format with JSON header. | |
| Dark mode by default, responsive, accessible, with a collapsible technical header. | |
| Clear errors for wrong key, bad format, or size over limit. | |
| Now implement the entire app in a single self-contained index.html with inline CSS and JS (no external resources). Include helpful comments in code. | |
| add an animated background that moves in response to the mouse cursor | |
| Add user-instructions and an expendable header with more advanced information about the encryption that is used and how it works. | |
| Rename 'advanced settings' to 'Advanced Information' and make sure the information is accurate and complete. Additionaly, replace the animated background with another animated background that is more fitting for the webpages functionality. | |
| Rename 'advanced settings' to 'Advanced Information' and make sure the information is accurate and complete. | |
| Change the animated background so it matches the theme of cryptography |