Elementor #993081

							Copy to clipboard
							
					<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">

<title>Download SWEATBANK App</title>

<style>
    * {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100%;
    }

    body {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
        background: #f6f7f9;
        color: #111111;
    }

    .download-card {
        width: 100%;
        max-width: 500px;
        padding: 38px 28px 30px;
        text-align: center;
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    }

    .app-icon {
        width: 78px;
        height: 78px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        background: #111111;
        color: #ffffff;
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -1px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .badge {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 14px;
        border-radius: 50px;
        background: #f0f0f0;
        color: #555555;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    h1 {
        margin: 0 0 12px;
        font-size: 30px;
        line-height: 1.2;
        font-weight: 750;
    }

    .description {
        max-width: 400px;
        margin: 0 auto;
        color: #666666;
        font-size: 15px;
        line-height: 1.6;
    }

    .status {
        min-height: 60px;
        margin-top: 25px;
        color: #555555;
        font-size: 14px;
    }

    .spinner {
        width: 24px;
        height: 24px;
        margin: 0 auto 10px;
        border: 3px solid #e5e5e5;
        border-top-color: #111111;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .store-buttons {
        display: none;
        width: 100%;
        margin-top: 10px;
        gap: 12px;
        flex-direction: column;
    }

    .store-button {
        width: 100%;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 18px;
        border-radius: 12px;
        background: #111111;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

    .store-button:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }

    .store-button:active {
        transform: scale(0.98);
    }

    .store-icon {
        font-size: 22px;
        line-height: 1;
    }

    .store-text {
        text-align: left;
    }

    .store-text small {
        display: block;
        margin-bottom: 2px;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.6px;
    }

    .fallback-message {
        display: none;
        margin-top: 15px;
        color: #777777;
        font-size: 12px;
        line-height: 1.5;
    }

    .platform-info {
        margin-top: 25px;
        color: #999999;
        font-size: 11px;
    }

    .platform-info strong {
        color: #666666;
    }

    @media (max-width: 480px) {
        body {
            padding: 15px;
        }

        .download-card {
            padding: 32px 20px 26px;
            border-radius: 20px;
        }

        h1 {
            font-size: 26px;
        }

        .description {
            font-size: 14px;
        }
    }
</style>

<div class="download-card">

    <!-- APP ICON -->
    <div class="app-icon">
        SB
    </div>

    <div class="badge">
        SWEATBANK MOBILE APP
    </div>

    <h1>
        Get the SWEATBANK App
    </h1>

    <!-- STATUS -->
    <div id="status" class="status">
        <div class="spinner"></div>
        Detecting your device...
    </div>

    <!-- STORE BUTTONS -->
    <div id="storeButtons" class="store-buttons">

        <!-- ANDROID -->
        <a
            id="androidButton"
            class="store-button"
            href="https://play.google.com/store/apps/details?id=com.sweatbank.garhdev"
            rel="noopener"
        >
            <span class="store-icon">▶</span>

            <span class="store-text">
                <small>GET IT ON</small>
                Google Play
            </span>
        </a>

        <!-- IOS -->
        <a
            id="iosButton"
            class="store-button"
            href="https://apps.apple.com/in/app/sweatbank/id6769289584"
            rel="noopener"
        >
            <span class="store-icon">●</span>

            <span class="store-text">
                <small>DOWNLOAD ON THE</small>
                App Store
            </span>
        </a>

    </div>

    <!-- FALLBACK MESSAGE -->
    <div id="fallbackMessage" class="fallback-message">
        If the store did not open automatically,
        tap the button above.
    </div>

    <div class="platform-info">
        Available on <strong>Android</strong> &
        <strong>iOS</strong>
    </div>

</div>

<script>

(function () {

    "use strict";

    /* ==========================================
       STORE URLs
    ========================================== */

    const ANDROID_URL =
        "https://play.google.com/store/apps/details?id=com.sweatbank.garhdev";

    const IOS_URL =
        "https://apps.apple.com/in/app/sweatbank/id6769289584";


    /* ==========================================
       ELEMENTS
    ========================================== */

    const status =
        document.getElementById("status");

    const storeButtons =
        document.getElementById("storeButtons");

    const androidButton =
        document.getElementById("androidButton");

    const iosButton =
        document.getElementById("iosButton");

    const fallbackMessage =
        document.getElementById("fallbackMessage");


    /* ==========================================
       DEVICE DETECTION
    ========================================== */

    const userAgent =
        navigator.userAgent || "";

    const platform =
        navigator.platform || "";

    const isAndroid =
        /Android/i.test(userAgent);

    const isIOS =
        /iPhone|iPad|iPod/i.test(userAgent) ||
        (
            platform === "MacIntel" &&
            navigator.maxTouchPoints > 1
        );


    /* ==========================================
       SHOW BUTTONS
    ========================================== */

    function showButtons(device) {

        storeButtons.style.display = "flex";

        if (device === "android") {

            androidButton.style.display = "flex";
            iosButton.style.display = "none";

        }

        else if (device === "ios") {

            androidButton.style.display = "none";
            iosButton.style.display = "flex";

        }

        else {

            androidButton.style.display = "flex";
            iosButton.style.display = "flex";

        }

    }


    /* ==========================================
       ANDROID
    ========================================== */

    if (isAndroid) {

        showButtons("android");

        status.innerHTML =
            '<div class="spinner"></div>' +
            'Opening Google Play...';


        let pageLeft = false;


        const visibilityHandler = function () {

            if (document.hidden) {

                pageLeft = true;

            }

        };


        document.addEventListener(
            "visibilitychange",
            visibilityHandler
        );


        /*
         * Attempt native Google Play.
         */

        window.location.href =
            "market://details?id=com.sweatbank.garhdev";


        /*
         * Wait before HTTPS fallback.
         */

        setTimeout(function () {

            document.removeEventListener(
                "visibilitychange",
                visibilityHandler
            );


            if (!pageLeft) {

                window.location.href =
                    ANDROID_URL;

            }


            /*
             * Keep manual button available.
             */

            setTimeout(function () {

                if (!document.hidden) {

                    status.textContent =
                        "If Google Play did not open, tap the button below.";

                    fallbackMessage.style.display =
                        "block";

                }

            }, 1500);

        }, 2000);

    }


    /* ==========================================
       IOS
    ========================================== */

    else if (isIOS) {

        showButtons("ios");

        status.innerHTML =
            '<div class="spinner"></div>' +
            'Opening the App Store...';


        /*
         * Open App Store.
         */

        window.location.href =
            IOS_URL;


        /*
         * Manual fallback.
         */

        setTimeout(function () {

            if (!document.hidden) {

                status.textContent =
                    "If the App Store did not open, tap the button below.";

                fallbackMessage.style.display =
                    "block";

            }

        }, 2000);

    }


    /* ==========================================
       DESKTOP / UNKNOWN
    ========================================== */

    else {

        status.textContent =
            "Choose your device to download SWEATBANK.";

        showButtons("all");

    }

})();

</script>