Jon2G
diff --git a/‎README.md‎
Lines changed: 23 additions & 0 deletions b/‎README.md‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 19 additions & 2 deletions b/‎index.html‎
Lines changed: 19 additions & 2 deletions
@@ -5,13 +5,15 @@ Sort your Spotify playlists by **BPM** and **harmonic key** using the **Camelot
 ![Vue 3](https://img.shields.io/badge/Vue-3.5-4FC08D?logo=vuedotjs)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript)
 ![Vuestic UI](https://img.shields.io/badge/Vuestic_UI-1.10-154EC1)
+![PWA](https://img.shields.io/badge/PWA-Ready-5A0FC8?logo=pwa)
 
 ## Features
 
 - **BPM Sorting** - Organize tracks by tempo for smooth energy transitions
 - **Harmonic Mixing** - Use the Camelot Wheel for seamless key-matched transitions
 - **Smart Preview** - See before/after comparison with harmonic score analysis
 - **Direct Spotify Integration** - Sort existing playlists without creating duplicates
+- **Progressive Web App** - Install on your device for offline access
 
 ## How It Works
 
@@ -72,6 +74,26 @@ npm run build
 npm run preview
 ```
 
+## PWA Features
+
+SortMyMix is a Progressive Web App with the following capabilities:
+
+- **Installable** - Add to home screen on mobile or desktop
+- **Offline Support** - Core app works without internet
+- **Caching** - Spotify album artwork is cached for faster loading
+- **Auto Updates** - Service worker updates automatically
+
+### Generating PNG Icons (Optional)
+
+For better browser compatibility, you can generate PNG icons:
+
+```bash
+npm install -D sharp
+node scripts/generate-icons.js
+```
+
+Then update `vite.config.ts` to use PNG icons in the manifest.
+
 ## Deployment
 
 This project is configured for GitHub Pages deployment:
@@ -95,6 +117,7 @@ npm run build
 - **Pinia** for state management
 - **Vue Router** for navigation
 - **Vite** for blazing fast builds
+- **vite-plugin-pwa** for PWA support
 
 ## The Camelot Wheel
 
 
@@ -2,9 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/SortMyMix/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SortMyMix - Sort Your Spotify Playlists</title>
+    
+    <!-- PWA Meta Tags -->
+    <meta name="theme-color" content="#1DB954" />
+    <meta name="description" content="Sort your Spotify playlists by BPM and harmonic key using the Camelot Wheel for perfect DJ-style mixing" />
+    
+    <!-- Apple PWA -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="SortMyMix" />
+    <link rel="apple-touch-icon" href="/SortMyMix/apple-touch-icon.svg" />
+    
+    <!-- Open Graph -->
+    <meta property="og:title" content="SortMyMix - Spotify Playlist Sorter" />
+    <meta property="og:description" content="Sort your Spotify playlists by BPM and harmonic key using the Camelot Wheel" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="/SortMyMix/pwa-512x512.svg" />
+    
+    <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
@@ -14,4 +32,3 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
-