Initial commit: PassMaster PWA MVP

public/icons/README.md

@@ -0,0 +1,35 @@
+# Icons Directory
+
+This directory should contain the following icon files for PWA support:
+
+## Required Icons
+
+- `icon-72.png` (72x72)
+- `icon-96.png` (96x96)
+- `icon-128.png` (128x128)
+- `icon-144.png` (144x144)
+- `icon-152.png` (152x152)
+- `icon-192.png` (192x192)
+- `icon-384.png` (384x384)
+- `icon-512.png` (512x512)
+
+## Additional Files
+
+- `apple-touch-icon.png` (180x180)
+- `favicon.ico` (16x16, 32x32)
+
+## Icon Design Guidelines
+
+- Use a shield or lock symbol to represent security
+- Primary color: #3b82f6 (blue-600)
+- Ensure good contrast for accessibility
+- Test on both light and dark backgrounds
+- Make sure icons are recognizable at small sizes
+
+## Generation
+
+You can use tools like:
+- [Favicon Generator](https://realfavicongenerator.net/)
+- [PWA Builder](https://www.pwabuilder.com/imageGenerator)
+- [Figma](https://figma.com/) for design
+- [Inkscape](https://inkscape.org/) for vector graphics

public/manifest.json

@@ -0,0 +1,111 @@
+{
+  "name": "PassMaster - Free Offline Secure Password Generator",
+  "short_name": "PassMaster",
+  "description": "Generate ultra-secure passwords instantly, offline with client-side encryption. 100% open-source, private, and free.",
+  "id": "passmaster-pwa",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3b82f6",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "lang": "en",
+  "categories": ["security", "utilities", "productivity", "developer-tools"],
+  "prefer_related_applications": false,
+  "related_applications": [],
+  "edge_side_panel": {
+    "preferred_width": 400
+  },
+  "icons": [
+    {
+      "src": "/icons/icon-72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Generate Password",
+      "short_name": "Generate",
+      "description": "Quickly generate a new secure password",
+      "url": "/#generator",
+      "icons": [
+        {
+          "src": "/icons/icon-96.png",
+          "sizes": "96x96"
+        }
+      ]
+    },
+    {
+      "name": "Password History",
+      "short_name": "History",
+      "description": "View recently generated passwords",
+      "url": "/#history",
+      "icons": [
+        {
+          "src": "/icons/icon-96.png",
+          "sizes": "96x96"
+        }
+      ]
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshots/desktop.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "PassMaster Desktop Interface"
+    },
+    {
+      "src": "/screenshots/mobile.png",
+      "sizes": "390x844",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "PassMaster Mobile Interface"
+    }
+  ]
+}

public/screenshots/README.md

@@ -0,0 +1,23 @@
+# Screenshots Directory
+
+This directory should contain screenshots for PWA app store listings:
+
+## Required Screenshots
+
+- `desktop.png` (1280x720) - Desktop interface screenshot
+- `mobile.png` (390x844) - Mobile interface screenshot
+
+## Screenshot Guidelines
+
+- Show the password generator in action
+- Display a generated password with strength meter
+- Include the feature cards section
+- Ensure good contrast and readability
+- Use consistent branding colors
+- Test on different devices and orientations
+
+## Content Suggestions
+
+- Desktop: Show the full interface with generator, features, and FAQ
+- Mobile: Focus on the password generator and mobile navigation
+- Include both light and dark mode versions if possible

public/screenshots/desktop.png

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1280" height="720" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="#f3f4f6"/>
+  <rect x="0" y="0" width="100%" height="60" fill="#3b82f6"/>
+  <text x="50%" y="35" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">PassMaster</text>
+  <text x="50%" y="80" text-anchor="middle" fill="#6b7280" font-family="Arial, sans-serif" font-size="16">Desktop Interface</text>
+  <rect x="50" y="120" width="1180" height="200" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
+  <text x="50%" y="150" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="14">Password Generator Interface</text>
+  <rect x="80" y="180" width="1120" height="40" rx="4" fill="#f9fafb" stroke="#d1d5db"/>
+  <text x="50%" y="205" text-anchor="middle" fill="#6b7280" font-family="monospace" font-size="12">••••••••••••••••</text>
+  <rect x="80" y="240" width="120" height="40" rx="4" fill="#3b82f6"/>
+  <text x="140" y="265" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="14">Generate</text>
+  <text x="50%" y="690" text-anchor="middle" fill="#9ca3af" font-family="Arial, sans-serif" font-size="12">Screenshot Placeholder</text>
+</svg>

public/screenshots/mobile.png

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="390" height="844" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="#f3f4f6"/>
+  <rect x="0" y="0" width="100%" height="60" fill="#3b82f6"/>
+  <text x="50%" y="35" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="20" font-weight="bold">PassMaster</text>
+  <text x="50%" y="80" text-anchor="middle" fill="#6b7280" font-family="Arial, sans-serif" font-size="14">Mobile Interface</text>
+  <rect x="20" y="120" width="350" height="200" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>
+  <text x="50%" y="150" text-anchor="middle" fill="#374151" font-family="Arial, sans-serif" font-size="12">Password Generator Interface</text>
+  <rect x="40" y="180" width="310" height="40" rx="4" fill="#f9fafb" stroke="#d1d5db"/>
+  <text x="50%" y="205" text-anchor="middle" fill="#6b7280" font-family="monospace" font-size="10">••••••••••••••••</text>
+  <rect x="40" y="240" width="120" height="40" rx="4" fill="#3b82f6"/>
+  <text x="100" y="265" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="12">Generate</text>
+  <text x="50%" y="814" text-anchor="middle" fill="#9ca3af" font-family="Arial, sans-serif" font-size="10">Screenshot Placeholder</text>
+</svg>