animations and readme

README.md

@@ -66,6 +66,16 @@ lapd-face-search/
    npm run build
    ```
 
+## Deployment
+
+You can easily deploy your own copy of this application to any web hosting service:
+
+1. **Download a release**: Visit [https://github.com/kylemcdonald/lapd-face-search/releases](https://github.com/kylemcdonald/lapd-face-search/releases) and download the latest `.zip` file
+2. **Extract and upload**: Extract the contents and upload them to any web hosting service (Netlify, Vercel, GitHub Pages, etc.)
+3. **That's it!**: The application will work immediately without any additional setup
+
+The app runs entirely in the browser, so no server-side processing is required.
+
 ## Usage
 
 1. Open the application in your web browser
@@ -104,3 +114,19 @@ The officer database includes:
 - **Processing Speed**: ~1-3 seconds per image
 - **Accuracy**: Optimized for clear, front-facing photos
 - **Browser Support**: Modern browsers with WebGL support
+
+## Releasing
+
+To create a new release:
+
+1. **Tag a new version**: Create a new tag with a version number (e.g., `v1.0.3`)
+   ```bash
+   git tag v1.0.3
+   ```
+
+2. **Push the tag**: Push the tag to trigger the release workflow
+   ```bash
+   git push origin v1.0.3
+   ```
+
+The GitHub Actions workflow will automatically build and create a release with the compiled files.

src/App.svelte

@@ -226,16 +226,29 @@
 </script>
 
 <main>
-  <h1>LAPD FACE SEARCH</h1>
-  <h2>Find LAPD cops with face recognition</h2>
+  <div class="about-link">
+    <a href="https://github.com/kylemcdonald/lapd-face-search/" target="_blank" rel="noopener noreferrer" title="About">?</a>
+  </div>
+
+  <h1>LAPD Face Search</h1>
+  <h2>Search over 9,000 LAPD headshots</h2>
   <p>
-    Search over 9000 headshots of LAPD cops using face recognition.<br
-    />Analysis happens on your device and images are not uploaded.<br />Blurry,
-    low-resolution photos will not match.
+    Upload a photo to find potential matches using facial recognition technology.
+    <br />
+    All processing happens locally in your browser for privacy. <br/>Blurry, low-resolution photos will not match.
   </p>
 
   {#if !loaded}
-    <div class="status">Loading...</div>
+    <form>
+      <label for="image-input" class="loading-label">Loading...</label>
+      <input
+        id="image-input"
+        type="file"
+        accept="image/*"
+        hidden=""
+        disabled
+      />
+    </form>
   {/if}
 
   {#if loaded}
@@ -296,6 +309,7 @@
     padding: 2rem;
     text-align: center;
     width: 100%;
+    position: relative;
   }
   h1 {
     font-size: 4em;
@@ -417,6 +431,34 @@
     padding-top: 2em;
   }
 
+  .about-link {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+  }
+
+  .about-link a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    background-color: red;
+    color: white;
+    text-decoration: none;
+    border-radius: 50%;
+    font-weight: bold;
+    font-size: 1.2rem;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 1.0);
+  }
+
+  .about-link a:hover {
+    background-color: #cc0000;
+    transform: scale(1.1);
+  }
+
   @media (max-width: 768px) {
     main {
       padding: 1rem;
@@ -440,4 +482,29 @@
       grid-template-columns: 1fr;
     }
   }
+
+  .loading-label {
+    background-color: #666 !important;
+    border-color: #666 !important;
+    color: #999 !important;
+    cursor: not-allowed !important;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  
+  .loading-label:hover {
+    background-color: #666 !important;
+    color: #999 !important;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 </style>