Full PWA mobile version added, bug fixes on deployment status, navigation links added

backend/static/icons/ICON_GENERATION_INSTRUCTIONS.md

@@ -0,0 +1,78 @@
+# PWA Icon Generation Instructions
+
+The PWA manifest requires 8 icon sizes for full compatibility across devices.
+
+## Required Icon Sizes
+
+- 72x72px
+- 96x96px
+- 128x128px
+- 144x144px
+- 152x152px
+- 192x192px
+- 384x384px
+- 512x512px (maskable)
+
+## Design Guidelines
+
+**Background:** Navy blue (#142a66)
+**Icon/Logo:** Orange (#f48b1c)
+**Style:** Simple, recognizable design that works at small sizes
+
+## Quick Generation Methods
+
+### Option 1: Online PWA Icon Generator
+
+1. Visit: https://www.pwabuilder.com/imageGenerator
+2. Upload a 512x512px source image
+3. Download the generated icon pack
+4. Copy PNG files to this directory
+
+### Option 2: ImageMagick (Command Line)
+
+If you have a 512x512px source image called `source-icon.png`:
+
+```bash
+# From the icons directory
+for size in 72 96 128 144 152 192 384 512; do
+  convert source-icon.png -resize ${size}x${size} icon-${size}.png
+done
+```
+
+### Option 3: Photoshop/GIMP
+
+1. Create a 512x512px canvas
+2. Add your design (navy background + orange icon)
+3. Save/Export for each required size
+4. Name files as: icon-72.png, icon-96.png, etc.
+
+## Temporary Placeholder
+
+For testing, you can use a simple colored square:
+
+```bash
+# Generate simple colored placeholder icons
+for size in 72 96 128 144 152 192 384 512; do
+  convert -size ${size}x${size} xc:#142a66 \
+    -gravity center \
+    -fill '#f48b1c' \
+    -pointsize $((size / 2)) \
+    -annotate +0+0 'SFM' \
+    icon-${size}.png
+done
+```
+
+## Verification
+
+After generating icons, verify:
+- All 8 sizes exist in this directory
+- Files are named exactly: icon-72.png, icon-96.png, etc.
+- Images have transparent or navy background
+- Logo/text is clearly visible at smallest size (72px)
+
+## Testing PWA Installation
+
+1. Open SFM in Chrome on Android or Safari on iOS
+2. Look for "Install App" or "Add to Home Screen" prompt
+3. Check that the correct icon appears in the install dialog
+4. After installation, verify icon on home screen

backend/static/icons/icon-128.png.svg

@@ -0,0 +1,4 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
+  <rect width="128" height="128" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="128" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-144.png.svg

@@ -0,0 +1,4 @@
+<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
+  <rect width="144" height="144" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-152.png.svg

@@ -0,0 +1,4 @@
+<svg width="152" height="152" xmlns="http://www.w3.org/2000/svg">
+  <rect width="152" height="152" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="152" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-192.png.svg

@@ -0,0 +1,4 @@
+<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
+  <rect width="192" height="192" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="192" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-384.png.svg

@@ -0,0 +1,4 @@
+<svg width="384" height="384" xmlns="http://www.w3.org/2000/svg">
+  <rect width="384" height="384" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="38" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-512.png.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <rect width="512" height="512" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="512" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-72.png.svg

@@ -0,0 +1,4 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg">
+  <rect width="72" height="72" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>

backend/static/icons/icon-96.png.svg

@@ -0,0 +1,4 @@
+<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg">
+  <rect width="96" height="96" fill="#142a66"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="96" font-weight="bold" fill="#f48b1c" text-anchor="middle" dominant-baseline="middle">SFM</text>
+</svg>