From 52572fc61c979f3d3a00ad25d5123795b9bfb4a1 Mon Sep 17 00:00:00 2001
From: Weston Blieden <mblieden@gmail.com>
Date: Tue, 21 Apr 2026 08:57:09 +0200
Subject: [PATCH] Update homepage: remove custom variant, add ACAP3 card,
 rotating hero word, device language

---
 docs/index.html | 94 +++++++++++++++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 39 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 43f87ab..b769136 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,22 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tailscale VPN for Axis Cameras</title>
-  <meta name="description" content="Install Tailscale VPN directly on your Axis camera. Secure remote access with WireGuard, no extra hardware needed.">
+  <title>Tailscale VPN for Axis Devices</title>
+  <meta name="description" content="Install Tailscale VPN directly on your Axis device. Secure remote access with WireGuard, no extra hardware needed.">
 
   <!-- Open Graph / LinkedIn -->
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://mo3he.github.io/Axis_Cam_Tailscale/">
-  <meta property="og:title" content="Tailscale VPN for Axis Cameras">
-  <meta property="og:description" content="Secure remote access to your Axis cameras over WireGuard. No extra hardware, no complex network config - just install and connect.">
+  <meta property="og:title" content="Tailscale VPN for Axis Devices">
+  <meta property="og:description" content="Secure remote access to your Axis devices over WireGuard. No extra hardware, no complex network config - just install and connect.">
   <meta property="og:image" content="https://mo3he.github.io/Axis_Cam_Tailscale/og-image.png">
   <meta property="og:image:width" content="1340">
   <meta property="og:image:height" content="724">
 
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="Tailscale VPN for Axis Cameras">
-  <meta name="twitter:description" content="Secure remote access to your Axis cameras over WireGuard. No extra hardware, no complex network config - just install and connect.">
+  <meta name="twitter:title" content="Tailscale VPN for Axis Devices">
+  <meta name="twitter:description" content="Secure remote access to your Axis devices over WireGuard. No extra hardware, no complex network config - just install and connect.">
   <meta name="twitter:image" content="https://mo3he.github.io/Axis_Cam_Tailscale/og-image.png">
 
   <style>
@@ -117,6 +117,11 @@
       margin-bottom: 1.25rem;
     }
     .hero h1 span { color: var(--accent); }
+    .hero-word {
+      display: inline-block;
+      color: var(--accent);
+      transition: opacity 0.25s, transform 0.25s;
+    }
     .hero p {
       font-size: 1.2rem;
       color: var(--muted);
@@ -223,7 +228,7 @@
       width: fit-content;
     }
     .tag-recommended { background: rgba(52, 211, 153, 0.15); color: var(--green); }
-    .tag-custom { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
+    .tag-acap3 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
     .tag-root { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
     .download-card h3 {
       font-size: 1.1rem;
@@ -334,7 +339,6 @@
       <a href="#install">Install</a>
       <a href="https://github.com/Mo3he/Axis_Cam_Tailscale" target="_blank" rel="noopener">GitHub</a>
       <a href="https://github.com/sponsors/Mo3he" target="_blank" rel="noopener" style="color: #db61a2;">Sponsor</a>
-      <a href="https://buymeacoffee.com/mo3he" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:0.35rem;background:#FFDD00;color:#000;font-weight:700;font-size:0.85rem;padding:0.35rem 0.85rem;border-radius:8px;line-height:1;">&#9749; Buy me a coffee</a>
       <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
         <svg id="iconSun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
         <svg id="iconMoon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -345,8 +349,8 @@
   <!-- Hero -->
   <section class="hero">
     <div class="badge">Open Source &middot; ACAP Package</div>
-    <h1>Tailscale VPN for <span>Axis Cameras</span></h1>
-    <p>Secure remote access to your Axis cameras over WireGuard. No extra hardware, no complex network config - just install and connect.</p>
+    <h1>Tailscale VPN for<br>Axis <span class="hero-word" id="heroWord">Cameras</span></h1>
+    <p>Secure remote access to your Axis devices over WireGuard. No extra hardware, no complex network config - just install and connect.</p>
     <div class="hero-buttons">
       <a href="#downloads" class="btn btn-primary">
         <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
@@ -379,12 +383,12 @@
     <div class="feature-card">
       <div class="icon">⚡</div>
       <h3>No Root Required</h3>
-      <p>Runs in user-space networking mode on Axis OS 12+. No need to enable root access on your camera.</p>
+      <p>Runs in user-space networking mode on Axis OS 12+. No need to enable root access on your device.</p>
     </div>
     <div class="feature-card">
       <div class="icon">📦</div>
       <h3>Simple EAP Install</h3>
-      <p>Upload the .eap file through your camera's web interface. Start the app and authenticate - done.</p>
+      <p>Upload the .eap file through your device's web interface. Start the app and authenticate - done.</p>
     </div>
     <div class="feature-card">
       <div class="icon">🔄</div>
@@ -394,19 +398,19 @@
     <div class="feature-card">
       <div class="icon">🌐</div>
       <h3>Headscale Compatible</h3>
-      <p>Supports self-hosted Headscale servers with configurable server URL and auth key.</p>
+      <p>Supports self-hosted Headscale servers with configurable server URL and auth key, built into every variant.</p>
     </div>
     <div class="feature-card">
-      <div class="icon">🏗️</div>
-      <h3>ARM &amp; AARCH64</h3>
-      <p>Supports both ARM (armv7hf) and AARCH64 architectures, covering a wide range of Axis camera models.</p>
+      <div class="icon">🔀</div>
+      <h3>Outbound Proxy</h3>
+      <p>Allows the device to route its own outbound traffic through Tailscale via a local HTTP/HTTPS and SOCKS5 proxy.</p>
     </div>
   </section>
 
   <!-- Downloads -->
   <section id="downloads" class="downloads">
     <h2>Download</h2>
-    <p class="subtitle">Pick the right variant for your camera and Axis OS version.</p>
+    <p class="subtitle">Pick the right variant for your device and Axis OS version.</p>
     <div class="download-grid">
       <!-- Standard -->
       <div class="download-card">
@@ -424,22 +428,6 @@
           </a>
         </div>
       </div>
-      <!-- Custom -->
-      <div class="download-card">
-        <div class="tag tag-custom">Custom / Headscale</div>
-        <h3>Custom Server</h3>
-        <p>Supports custom Tailscale control servers and auth keys. Ideal for self-hosted Headscale setups.</p>
-        <div class="arch-buttons">
-          <a class="arch-btn" data-asset="custom" data-arch="aarch64" href="https://github.com/Mo3he/Axis_Cam_Tailscale/releases/latest" target="_blank" rel="noopener">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-            AARCH64
-          </a>
-          <a class="arch-btn" data-asset="custom" data-arch="armv7hf" href="https://github.com/Mo3he/Axis_Cam_Tailscale/releases/latest" target="_blank" rel="noopener">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-            ARM
-          </a>
-        </div>
-      </div>
       <!-- ROOT -->
       <div class="download-card">
         <div class="tag tag-root">Root &middot; Legacy</div>
@@ -456,6 +444,18 @@
           </a>
         </div>
       </div>
+      <!-- ACAP3 -->
+      <div class="download-card">
+        <div class="tag tag-acap3">ACAP3 &middot; Legacy</div>
+        <h3>ACAP3 (Older Axis OS)</h3>
+        <p>For devices running Axis OS versions that do not support ACAP4. ARM only.</p>
+        <div class="arch-buttons">
+          <a class="arch-btn" data-asset="acap3" data-arch="armv7hf" href="https://github.com/Mo3he/Axis_Cam_Tailscale/releases/latest" target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            ARM
+          </a>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -467,14 +467,14 @@
         <div class="step-num">1</div>
         <div class="step-text">
           <strong>Download the EAP</strong>
-          <span>Grab the right .eap file for your camera architecture from the releases page above.</span>
+          <span>Grab the right .eap file for your device architecture from the releases page above.</span>
         </div>
       </div>
       <div class="step">
         <div class="step-num">2</div>
         <div class="step-text">
-          <strong>Upload to your camera</strong>
-          <span>Log into your Axis camera web interface and go to <strong>Apps &rarr; Add App</strong>. Upload the .eap file.</span>
+          <strong>Upload to your device</strong>
+          <span>Log into your Axis device web interface and go to <strong>Apps &rarr; Add App</strong>. Upload the .eap file.</span>
         </div>
       </div>
       <div class="step">
@@ -540,6 +540,22 @@
         }
       });
 
+      // Rotate hero word
+      var heroWord = document.getElementById('heroWord');
+      var devices = ['Cameras', 'Door Stations', 'Intercoms', 'Speakers', 'Radars', 'Encoders'];
+      var wordIdx = 0;
+      function cycleWord() {
+        wordIdx = (wordIdx + 1) % devices.length;
+        heroWord.style.opacity = '0';
+        heroWord.style.transform = 'translateY(8px)';
+        setTimeout(function() {
+          heroWord.textContent = devices[wordIdx];
+          heroWord.style.opacity = '1';
+          heroWord.style.transform = 'translateY(0)';
+        }, 250);
+      }
+      setInterval(cycleWord, 3000);
+
       // Rewrite download links to point directly to latest release assets
       fetch('https://api.github.com/repos/Mo3he/Axis_Cam_Tailscale/releases/latest')
         .then(function(r) { return r.json(); })
@@ -555,9 +571,9 @@
               var archMatch = name.indexOf(arch) !== -1;
               var typeMatch = false;
               if (type === 'Tailscale_VPN') {
-                typeMatch = name.indexOf('custom') === -1 && name.indexOf('root') === -1;
-              } else if (type === 'custom') {
-                typeMatch = name.indexOf('custom') !== -1;
+                typeMatch = name.indexOf('root') === -1 && name.indexOf('acap3') === -1;
+              } else if (type === 'acap3') {
+                typeMatch = name.indexOf('acap3') !== -1;
               } else if (type === 'ROOT') {
                 typeMatch = name.indexOf('root') !== -1;
               }