Auto-highlight the download card matching the visitor's OS

- assets/js/os-detect.js: same-origin script (keeps CSP script-src 'self')
  detects macOS/Windows/Linux via userAgentData/platform+UA and adds
  .is-recommended + reveals a 'Your platform' badge on the matching card
- Progressive enhancement: no JS = all three cards show equally
- dl-cards gain data-os; CSS for highlight + gradient badge
- build.py inlines the script into the single-file artifact bundle

Author: patj

assets/js/os-detect.js

@@ -0,0 +1,31 @@
+/* Highlight the download card matching the visitor's OS.
+   Progressive enhancement: if this doesn't run, all three cards show equally. */
+(function () {
+  function detectOS() {
+    var uaData = navigator.userAgentData;
+    var platform = (uaData && uaData.platform) || navigator.platform || '';
+    var ua = navigator.userAgent || '';
+    var s = (platform + ' ' + ua).toLowerCase();
+
+    if (/mac|iphone|ipad|ipod|darwin/.test(s)) return 'macos';
+    if (/win/.test(s)) return 'windows';
+    if (/linux|x11|android|cros/.test(s)) return 'linux'; // Chromebooks + Android land on Linux/AppImage
+    return null;
+  }
+
+  function apply() {
+    var os = detectOS();
+    if (!os) return;
+    var card = document.querySelector('.dl-card[data-os="' + os + '"]');
+    if (!card) return;
+    card.classList.add('is-recommended');
+    var badge = card.querySelector('.dl-reco');
+    if (badge) badge.hidden = false;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', apply);
+  } else {
+    apply();
+  }
+})();

index.html

@@ -291,23 +291,26 @@ <h2>Native builds, released together</h2>
       </div>
 
       <div class="dl-grid">
-        <div class="dl-card">
+        <div class="dl-card" data-os="linux">
+          <span class="dl-reco" hidden>Your platform</span>
           <div class="os"><svg viewBox="0 0 24 24"><path d="M12 2C9.5 2 8.7 4 8.7 6.2c0 1 .2 1.6.2 2.4-.5.6-2.4 2.9-2.4 6.1 0 2 .6 3.4 1.4 4.4.4.5.2 1.3-.4 1.6-.7.4-1.2 1-1.2 1.6 0 .8.9 1.2 2.2 1.2h6.6c1.3 0 2.2-.4 2.2-1.2 0-.6-.5-1.2-1.2-1.6-.6-.3-.8-1.1-.4-1.6.8-1 1.4-2.4 1.4-4.4 0-3.2-1.9-5.5-2.4-6.1 0-.8.2-1.4.2-2.4C15.3 4 14.5 2 12 2Z"/></svg> Linux</div>
           <div class="variants">
             <a href="https://github.com/aethersdr/AetherSDR/releases/latest">AppImage <span class="arch">x86_64</span></a>
             <a href="https://github.com/aethersdr/AetherSDR/releases/latest">AppImage <span class="arch">aarch64 · Pi</span></a>
           </div>
         </div>
 
-        <div class="dl-card">
+        <div class="dl-card" data-os="macos">
+          <span class="dl-reco" hidden>Your platform</span>
           <div class="os"><svg viewBox="0 0 24 24"><path d="M16.4 2c.1 1.2-.3 2.3-1 3.2-.8.9-2 1.6-3.1 1.5-.1-1.1.4-2.3 1.1-3.1.8-.9 2-1.5 3-1.6ZM19 17.3c-.5 1.2-.8 1.8-1.5 2.8-1 1.5-2.5 3.3-4.3 3.3-1.6 0-2-.9-4.1-.9-2.1 0-2.6.9-4.1.9-1.8 0-3.2-1.7-4.2-3.1C-1 16-1.4 9.8 1.4 6.9 2.7 5.4 4.5 4.5 6.3 4.5c1.8 0 3 1 4.1 1 1 0 2.4-1 4.3-1 1.4 0 3.4.6 4.7 2.4-4.1 2.3-3.5 8.2.6 10.4Z"/></svg> macOS</div>
           <div class="variants">
             <a href="https://github.com/aethersdr/AetherSDR/releases/latest">DMG <span class="arch">Apple Silicon</span></a>
             <a href="https://github.com/aethersdr/AetherSDR/releases/latest">DMG <span class="arch">Intel · Rosetta</span></a>
           </div>
         </div>
 
-        <div class="dl-card">
+        <div class="dl-card" data-os="windows">
+          <span class="dl-reco" hidden>Your platform</span>
           <div class="os"><svg viewBox="0 0 24 24"><path d="M3 5.5 10.5 4.4v7.1H3V5.5ZM11.6 4.2 21 3v8.5h-9.4V4.2ZM3 12.5h7.5v7.1L3 18.5v-6ZM11.6 12.5H21V21l-9.4-1.3v-7.2Z"/></svg> Windows</div>
           <div class="variants">
             <a class="primary-dl" href="https://apps.microsoft.com/detail/9nc6bmwfn811" target="_blank" rel="noopener">Microsoft Store <span class="arch">recommended</span></a>
@@ -486,5 +489,6 @@ <h4>Resources</h4>
     </div>
   </footer>
 
+  <script src="assets/js/os-detect.js?v=1" defer></script>
 </body>
 </html>

scripts/build.py

@@ -33,6 +33,16 @@ def main():
         f"<style>\n{css}\n</style>",
     )
 
+    # Inline JS as a real <script> before the asset pass — data-URI-ing a
+    # script src would break execution in the single-file bundle.
+    with open(os.path.join(ROOT, "assets/js/os-detect.js"), encoding="utf-8") as f:
+        js = f.read()
+    html = re.sub(
+        r'<script src="assets/js/os-detect\.js[^"]*"[^>]*></script>',
+        f"<script>\n{js}\n</script>",
+        html,
+    )
+
     # Embed every referenced asset (src="assets/..." and content="assets/...").
     def repl(match):
         attr, path = match.group(1), match.group(2)

styles.css

@@ -345,6 +345,18 @@ section.block { padding: 84px 0; }
   transition: border-color .2s ease, transform .2s ease;
 }
 .dl-card:hover { border-color: var(--line-hi); transform: translateY(-3px); }
+.dl-card.is-recommended {
+  border-color: var(--cyan);
+  box-shadow: 0 0 0 1px var(--cyan), 0 26px 56px -26px rgba(50, 160, 220, 0.6);
+  background: linear-gradient(180deg, rgba(93,227,255,0.06), rgba(93,227,255,0.01)), var(--bg-1);
+}
+.dl-reco {
+  align-self: flex-start;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
+  color: #041019;
+  background: var(--grad);
+  border-radius: 100px; padding: 4px 11px;
+}
 .dl-card .os { display: flex; align-items: center; gap: 11px; font-weight: 680; font-size: 18px; }
 .dl-card .os svg { width: 24px; height: 24px; fill: var(--cyan); }
 .dl-card .variants { display: grid; gap: 8px; margin-top: 2px; }