Adding footer links, tweaking privacy text, etc.

index.html

@@ -44,7 +44,7 @@
           id="settings-btn"
           aria-label="Open settings"
         >
-          ⚙
+          ⚙️
         </button>
       </header>
 
@@ -119,9 +119,23 @@
       </main>
 
       <footer>
-        <button class="footer-link" id="privacy-link" type="button">🔒 Privacy</button>
+        <button class="footer-link" id="privacy-link" type="button">
-        <a class="footer-link" href="https://git.bkr.im/ritual/status-poster" target="_blank" rel="noopener">🧑‍💻 Source Code</a>
+          🔒 Privacy
-        <a class="footer-link" href="https://ritual.sh" target="_blank" rel="noopener">🖥️ By Ritual</a>
+        </button>
+        <a
+          class="footer-link"
+          href="https://git.bkr.im/ritual/status-poster"
+          target="_blank"
+          rel="noopener"
+          >🧑‍💻 Source Code</a
+        >
+        <a
+          class="footer-link"
+          href="https://ritual.sh"
+          target="_blank"
+          rel="noopener"
+          >🖥️ By Ritual</a
+        >
       </footer>
     </div>
 
@@ -154,7 +168,9 @@
             <strong>api.omg.lol</strong> at the moment you post a status.
           </p>
           <p style="font-size: 0.95rem; line-height: 1.7; margin: 0">
-            No analytics, no tracking, no third-party requests. The
+            No analytics, no tracking. The emoji picker loads its library and
+            data from <strong>cdn.jsdelivr.net</strong> - no personal data is
+            sent there, and the data is cached locally after the first load. The
             <a href="https://git.bkr.im/ritual/status-poster"
               >source code is available online</a
             >
@@ -190,6 +206,15 @@
         </div>
 
         <div class="modal-body">
+          <div class="polite-notice">
+            <span class="privacy-icon">🔒</span>
+            <span
+              >Your username and API key are stored
+              <strong>only in this browser</strong> and are never sent anywhere
+              except <strong>api.omg.lol</strong> when you post.</span
+            >
+          </div>
+
           <div class="field">
             <label for="s-username">omg.lol username</label>
             <input
@@ -259,7 +284,10 @@
       </div>
     </div>
 
-    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"
+    ></script>
     <script src="script.js"></script>
   </body>
 </html>

style.css

@@ -435,7 +435,9 @@ input::placeholder {
   cursor: pointer;
 }
 
-#toast.show.clickable:hover { filter: brightness(1.1); }
+#toast.show.clickable:hover {
+  filter: brightness(1.1);
+}
 
 /* ── Settings modal ────────────────────────────────────────────────────── */
 .overlay {
@@ -519,7 +521,7 @@ input::placeholder {
 }
 
 /* Privacy notice */
-.privacy-notice {
+.polite-notice {
   background: var(--accent-dim);
   border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
   border-radius: var(--r);

sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'status-poster-v9';
+const CACHE = 'status-poster-v10';
 const PRECACHE = ['.', 'index.html', 'style.css', 'script.js', 'manifest.json', 'sw.js', 'icon.svg'];
 
 self.addEventListener('install', e => {