From 0490ecb9c88e3e902030ba8d4d8a76924395ba42 Mon Sep 17 00:00:00 2001
From: alwaysmesmerizingyou <alwaysmesmerizingyou@gmail.com>
Date: Tue, 8 Sep 2026 17:29:32 -0700
Subject: [PATCH] added android support

---
 index.html | 242 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 143 insertions(+), 99 deletions(-)

diff --git a/index.html b/index.html
index 8835358..42860dc 100644
--- a/index.html
+++ b/index.html
@@ -270,21 +270,15 @@
                 <div id="hero-prism" class="hero-prism"></div>
             </div>
             <div class="container hero-container">
-
                 <div class="logo-image">
                     <img src="assets/images/header_logo.png" alt="Vyla Home Logo" width="100" height="100"
                         fetchpriority="high"
                         srcset="assets/images/header_logo.png 100w, assets/images/header_logo.png 200w" sizes="100px">
                 </div>
-
                 <h1 id="hero-title" class="hero-title">The Local-First Desktop Media Center</h1>
-
-                <p class="hero-description">
-                    Vyla Home runs directly on your local workstation. By decentralizing stream resolution to your
-                    residential connection, it eliminates centralized cloud failures, datacenter IP blocks, and
-                    third-party tracking.
-                </p>
-
+                <p class="hero-description"> Vyla Home runs directly on your local workstation. By decentralizing stream
+                    resolution to your residential connection, it eliminates centralized cloud failures, datacenter IP
+                    blocks, and third-party tracking. </p>
                 <div class="discord-copy-bar reveal" id="copy-discord-btn" role="button" tabindex="0"
                     aria-label="Copy GitLab releases URL">
                     <span class="copy-discord-label"
@@ -309,14 +303,12 @@
                                 xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                 <g>
                                     <path d="M5.5 12.5L10 17L19.5 7.5" stroke="#ffffff" stroke-width="2.5"
-                                        stroke-linecap="round" stroke-linejoin="round">
-                                    </path>
+                                        stroke-linecap="round" stroke-linejoin="round"></path>
                                 </g>
                             </svg>
                         </span>
                     </span>
                 </div>
-
                 <div class="hero-cta-row reveal">
                     <div class="download-expandable" id="hero-download-expandable" aria-expanded="false">
                         <button class="hero-cta hero-cta-dark" id="hero-download-btn">
@@ -335,6 +327,14 @@
                                 </svg>
                                 <span>Windows v0.0.0</span>
                             </a>
+                            <a href="#" class="download-option" id="hero-go-download">
+                                <svg class="android-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                    aria-hidden="true">
+                                    <path
+                                        d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
+                                </svg>
+                                <span>Android v1.0.2</span>
+                            </a>
                             <a href="#" class="download-option" id="hero-mac-download">
                                 <svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
                                     aria-hidden="true">
@@ -345,96 +345,76 @@
                             </a>
                         </div>
                     </div>
-
                     <a class="hero-cta hero-cta-unsure" href="https://gitlab.com/vyla-entertainment/home/-/releases"
-                        target="_blank" rel="noopener noreferrer">
-                        View Releases
-                    </a>
+                        target="_blank" rel="noopener noreferrer"> View Releases </a>
                 </div>
-
                 <script>
-                    async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, macId) {
+                    async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, goId, macId) {
                         const expandable = document.getElementById(expandableId);
                         const downloadBtn = document.getElementById(btnId);
                         const downloadOptions = document.getElementById(optionsId);
                         const windowsDownload = document.getElementById(windowsId);
+                        const goDownload = document.getElementById(goId);
                         const macDownload = document.getElementById(macId);
-
-                        if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !macDownload) return;
-
+                        if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !goDownload || !macDownload) return;
                         try {
-                            const response = await fetch(
-                                "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest"
-                            );
-
+                            const response = await fetch("https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest");
                             if (!response.ok) throw new Error("Failed to fetch latest release");
-
                             const release = await response.json();
                             const version = release.tag_name;
                             const fileVersion = version.replace(/^v/, "");
-
-                            const windowsAsset = release.assets?.links?.find(link =>
-                                link.name?.toLowerCase().endsWith(".exe")
-                            );
-                            const macAsset = release.assets?.links?.find(link =>
-                                link.name?.toLowerCase().endsWith(".dmg")
-                            );
-
-                            const btnText = downloadBtn.querySelector('.download-btn-text');
+                            const windowsAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".exe"));
+                            const macAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".dmg"));
+                            const btnText = downloadBtn.querySelector(".download-btn-text");
                             if (btnText) {
                                 btnText.textContent = `Download ${version}`;
                             }
-
                             if (windowsAsset?.url) {
                                 windowsDownload.href = windowsAsset.url;
-                                windowsDownload.querySelector('span').textContent = `Windows ${version}`;
                             } else {
                                 windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
-                                windowsDownload.querySelector('span').textContent = `Windows ${version}`;
                             }
-
+                            windowsDownload.querySelector("span").textContent = `Windows ${version}`;
+                            goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
+                            goDownload.querySelector("span").textContent = "Android v1.0.2";
                             if (macAsset?.url) {
                                 macDownload.href = macAsset.url;
-                                macDownload.querySelector('span').textContent = `Mac ${version}`;
                             } else {
                                 macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
-                                macDownload.querySelector('span').textContent = `Mac ${version}`;
                             }
-
-                            downloadBtn.addEventListener('click', (e) => {
+                            macDownload.querySelector("span").textContent = `Mac ${version}`;
+                            downloadBtn.addEventListener("click", (e) => {
                                 e.preventDefault();
-                                const isExpanded = expandable.getAttribute('aria-expanded') === 'true';
-                                expandable.setAttribute('aria-expanded', !isExpanded);
-                                downloadOptions.setAttribute('aria-hidden', isExpanded);
-                                downloadOptions.classList.toggle('show', !isExpanded);
+                                const isExpanded = expandable.getAttribute("aria-expanded") === "true";
+                                expandable.setAttribute("aria-expanded", String(!isExpanded));
+                                downloadOptions.setAttribute("aria-hidden", String(isExpanded));
+                                downloadOptions.classList.toggle("show", !isExpanded);
                             });
-
                         } catch (error) {
-                            const btnText = downloadBtn.querySelector('.download-btn-text');
+                            const btnText = downloadBtn.querySelector(".download-btn-text");
                             if (btnText) {
                                 btnText.textContent = "Download Latest Release";
                             }
-                            windowsDownload.querySelector('span').textContent = "Windows (Latest)";
-                            macDownload.querySelector('span').textContent = "Mac (Latest)";
+                            windowsDownload.querySelector("span").textContent = "Windows (Latest)";
+                            goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
+                            goDownload.querySelector("span").textContent = "Android v1.0.2";
+                            macDownload.querySelector("span").textContent = "Mac (Latest)";
                         }
                     }
-
-                    setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-mac-download");
-
-                    document.addEventListener('click', (e) => {
-                        const expandables = document.querySelectorAll('.download-expandable');
+                    setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-go-download", "hero-mac-download");
+                    document.addEventListener("click", (e) => {
+                        const expandables = document.querySelectorAll(".download-expandable");
                         expandables.forEach(expandable => {
-                            const btn = expandable.querySelector('button');
-                            const options = expandable.querySelector('.download-options');
+                            const btn = expandable.querySelector("button");
+                            const options = expandable.querySelector(".download-options");
                             if (btn && options && !expandable.contains(e.target)) {
-                                expandable.setAttribute('aria-expanded', 'false');
-                                options.setAttribute('aria-hidden', 'true');
-                                options.classList.remove('show');
+                                expandable.setAttribute("aria-expanded", "false");
+                                options.setAttribute("aria-hidden", "true");
+                                options.classList.remove("show");
                             }
                         });
                     });
                 </script>
-
                 <div class="hero-preview-wrap reveal">
                     <div class="platform-pill">
                         <svg class="windows-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
@@ -443,7 +423,18 @@
                                 d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
                         </svg>
                         <span>Windows 10 / 11 (64-bit)</span>
+
                         <span class="platform-divider">•</span>
+
+                        <svg class="android-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
+                            aria-hidden="true">
+                            <path
+                                d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
+                        </svg>
+                        <span>Android</span>
+
+                        <span class="platform-divider">•</span>
+
                         <svg class="mac-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
                             aria-hidden="true">
                             <path
@@ -452,14 +443,12 @@
                         <span>macOS (Apple Silicon)</span>
                     </div>
                 </div>
-
                 <div class="partners-inline reveal" id="partners-grid-wrap">
                     <p class="partners-label">Recognized and indexed across open media ecosystems</p>
                     <div class="partners-grid" id="partners-grid"></div>
                 </div>
             </div>
         </section>
-
         <div class="stats-grid reveal-stagger" id="stats-grid">
             <div class="stat-item reveal">
                 <span class="stat-value" id="stat-members"></span>
@@ -470,13 +459,11 @@
                 <span class="stat-label">Online Now</span>
             </div>
         </div>
-
         <section id="features" class="section features-section" aria-labelledby="features-heading">
             <div class="container features-container">
                 <header class="features-heading reveal">
                     <h2 id="features-heading" class="section-title-lg">Why choose Home?</h2>
                 </header>
-
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/1.png"
@@ -487,13 +474,11 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">No Datacenter Throttling</h3>
-                        <p class="section-subtitle">
-                            Shared hosting nodes and VPS providers routinely block traffic originating from datacenters.
-                            We removed the datacenter entirely. Connect directly via your residential network.
-                        </p>
+                        <p class="section-subtitle"> Shared hosting nodes and VPS providers routinely block traffic
+                            originating from datacenters. We removed the datacenter entirely. Connect directly via your
+                            residential network. </p>
                     </div>
                 </article>
-
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/2.png"
@@ -504,13 +489,10 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">No Single Point of Failure</h3>
-                        <p class="section-subtitle">
-                            When a central domain gets flagged or suspended, everyone goes dark. Running locally means
-                            your instance cannot be taken down by third parties.
-                        </p>
+                        <p class="section-subtitle"> When a central domain gets flagged or suspended, everyone goes
+                            dark. Running locally means your instance cannot be taken down by third parties. </p>
                     </div>
                 </article>
-
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/3.png"
@@ -521,13 +503,10 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Encrypted Local Vault</h3>
-                        <p class="section-subtitle">
-                            Your bookmarks, watch history, settings, and tokens are stored in an encrypted vault keyed
-                            uniquely to your hardware profile. Total privacy.
-                        </p>
+                        <p class="section-subtitle"> Your bookmarks, watch history, settings, and tokens are stored in
+                            an encrypted vault keyed uniquely to your hardware profile. Total privacy. </p>
                     </div>
                 </article>
-
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/4.png"
@@ -538,13 +517,10 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Automated OTA Updates</h3>
-                        <p class="section-subtitle">
-                            Vyla Home verifies releases directly from the repository upon startup. Update assets are
-                            downloaded, checksum-verified, and patched automatically.
-                        </p>
+                        <p class="section-subtitle"> Vyla Home verifies releases directly from the repository upon
+                            startup. Update assets are downloaded, checksum-verified, and patched automatically. </p>
                     </div>
                 </article>
-
                 <article class="feature-block reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/5.png"
@@ -555,13 +531,10 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Rich Discovery & Curated Media</h3>
-                        <p class="section-subtitle">
-                            Access curated collections, 4K releases, popular anime series, soundcloak music streaming,
-                            and detailed TMDB cast breakdowns seamlessly.
-                        </p>
+                        <p class="section-subtitle"> Access curated collections, 4K releases, popular anime series,
+                            soundcloak music streaming, and detailed TMDB cast breakdowns seamlessly. </p>
                     </div>
                 </article>
-
                 <article class="feature-block feature-block-reverse reveal">
                     <figure class="feature-media">
                         <img src="assets/images/features/6.png"
@@ -572,20 +545,19 @@
                     </figure>
                     <div class="feature-copy">
                         <h3 class="section-title-lg feature-title">Customizable Interface</h3>
-                        <p class="section-subtitle">
-                            Toggle dynamic color adaptations, trailer background playback, custom color themes,
-                            text-only mode, and layout preferences with full persistent storage.
+                        <p class="section-subtitle"> Toggle dynamic color adaptations, trailer background playback,
+                            custom color themes, text-only mode, and layout preferences with full persistent storage.
                         </p>
                     </div>
                 </article>
             </div>
         </section>
-
         <section id="testimonials" class="section testimonials-section" aria-labelledby="testimonials-heading">
             <div class="container testimonials-container">
                 <header class="testimonials-heading reveal">
                     <h2 id="testimonials-heading" class="section-title-lg">Here's what people say about <span
-                            class="bold">Vyla Home</span></h2>
+                            class="bold">Vyla Home</span>
+                    </h2>
                 </header>
                 <div class="marquee-wrap marquee-fade-wrap" role="region" aria-label="User testimonials carousel">
                     <div class="marquee-row marquee-left">
@@ -597,13 +569,13 @@
                 </div>
             </div>
         </section>
-
         <section id="faq" class="section faq-section" aria-labelledby="faq-heading">
             <div class="container">
                 <header class="faq-heading reveal">
                     <h2 id="faq-heading" class="section-title-lg">FAQ</h2>
                     <p class="section-subtitle">Still have questions? <a href="https://discord.gg/5eqRhKeywG"
-                            target="_blank" rel="noopener noreferrer">Ask in our Discord</a></p>
+                            target="_blank" rel="noopener noreferrer">Ask in our Discord</a>
+                    </p>
                 </header>
                 <div class="faq-list reveal-stagger" id="faq-list" role="list" aria-label="Frequently asked questions">
                 </div>
@@ -643,12 +615,84 @@
                             </svg>
                             <span>Mac v0.0.0</span>
                         </a>
+                        <a href="#" class="download-option" id="cta-go-download">
+                            <svg class="android-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                aria-hidden="true">
+                                <path
+                                    d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
+                            </svg>
+                            <span>Android v1.0.2</span>
+                        </a>
                     </div>
                 </div>
             </div>
 
             <script>
-                setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-mac-download");
+                async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, goId, macId) {
+                    const expandable = document.getElementById(expandableId);
+                    const downloadBtn = document.getElementById(btnId);
+                    const downloadOptions = document.getElementById(optionsId);
+                    const windowsDownload = document.getElementById(windowsId);
+                    const goDownload = document.getElementById(goId);
+                    const macDownload = document.getElementById(macId);
+                    if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !goDownload || !macDownload) return;
+                    try {
+                        const response = await fetch("https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest");
+                        if (!response.ok) throw new Error("Failed to fetch latest release");
+                        const release = await response.json();
+                        const version = release.tag_name;
+                        const fileVersion = version.replace(/^v/, "");
+                        const windowsAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".exe"));
+                        const macAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".dmg"));
+                        const btnText = downloadBtn.querySelector(".download-btn-text");
+                        if (btnText) {
+                            btnText.textContent = `Download ${version}`;
+                        }
+                        if (windowsAsset?.url) {
+                            windowsDownload.href = windowsAsset.url;
+                        } else {
+                            windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
+                        }
+                        windowsDownload.querySelector("span").textContent = `Windows ${version}`;
+                        goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
+                        goDownload.querySelector("span").textContent = "Android v1.0.2";
+                        if (macAsset?.url) {
+                            macDownload.href = macAsset.url;
+                        } else {
+                            macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
+                        }
+                        macDownload.querySelector("span").textContent = `Mac ${version}`;
+                        downloadBtn.addEventListener("click", (e) => {
+                            e.preventDefault();
+                            const isExpanded = expandable.getAttribute("aria-expanded") === "true";
+                            expandable.setAttribute("aria-expanded", String(!isExpanded));
+                            downloadOptions.setAttribute("aria-hidden", String(isExpanded));
+                            downloadOptions.classList.toggle("show", !isExpanded);
+                        });
+                    } catch (error) {
+                        const btnText = downloadBtn.querySelector(".download-btn-text");
+                        if (btnText) {
+                            btnText.textContent = "Download Latest Release";
+                        }
+                        windowsDownload.querySelector("span").textContent = "Windows (Latest)";
+                        goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
+                        goDownload.querySelector("span").textContent = "Android v1.0.2";
+                        macDownload.querySelector("span").textContent = "Mac (Latest)";
+                    }
+                }
+                setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-go-download", "cta-mac-download");
+                document.addEventListener("click", (e) => {
+                    const expandables = document.querySelectorAll(".download-expandable");
+                    expandables.forEach(expandable => {
+                        const btn = expandable.querySelector("button");
+                        const options = expandable.querySelector(".download-options");
+                        if (btn && options && !expandable.contains(e.target)) {
+                            expandable.setAttribute("aria-expanded", "false");
+                            options.setAttribute("aria-hidden", "true");
+                            options.classList.remove("show");
+                        }
+                    });
+                });
             </script>
         </section>