Initial commit: PassMaster PWA MVP

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>