index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atharva Apps</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <script id="__bs_script__">//<![CDATA[
        (function () {
            try {
                var script = document.createElement('script');
                if ('async') {
                    script.async = true;
                }
                script.src = '/browser-sync/browser-sync-client.js?v=2.28.1'.replace("HOST", location.hostname);
                if (document.body) {
                    document.body.appendChild(script);
                }
            } catch (e) {
                console.error("Browsersync: could not append script tag", e);
            }
        })()
        //]]></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
            const isAndroid = /android/i.test(userAgent);
            const isIOS = /iPhone|iPod/.test(userAgent) || 
                  (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);

            document.querySelectorAll(".app-card").forEach(function (card) {
                let playStoreLink = card.getAttribute("href"); // Default Android link
                let appStoreLink = ""; // Define corresponding iOS link here

                // Define iOS equivalent links (Replace with actual App Store URLs)
                const iosLinks = {
                    "com.app.abillion": "https://apps.apple.com/app/abillion-trade-analytics/id6464286930",
                    "com.atharvasystem.todo": "https://apps.apple.com/us/app/donezo-to-do-list-calendar/id6738828343",
                    "com.atharva.notesu": "https://apps.apple.com/app/colored-note-taking-app-notesu/id6740911306",
                    "com.atharva.expensetracker": "https://apps.apple.com/app/id6449970262",
                    "com.atharvaSystem.odooapp": "https://apps.apple.com/us/app/mosho-cart-odoo/id6470815365",
                    "com.moshocart.atharvasystem": "https://apps.apple.com/app/mosho-cart/id1640443975",
                    "com.atharvasystem.quickscreenrecorder": "https://apps.apple.com/app/screen-recorder-live-stream/id6467652071",
                    "com.asapp.texttospeech": "https://apps.apple.com/app/talkify-text-to-speech/id6502435546",
                    "com.app.mobileiptv": "https://apps.apple.com/app/iptv-your-mobile-tv/id6504405496",
                    "com.atharvasystem.spinwheel": "https://apps.apple.com/us/app/spin-wheel-app/id6742394794",
                };

                // Extract package name from Android link
                const packageNameMatch = playStoreLink.match(/id=([^&]+)/);
                if (packageNameMatch) {
                    const packageName = packageNameMatch[1];
                    appStoreLink = iosLinks[packageName] || playStoreLink; // Default to Android link if iOS link not found
                }

                // Set appropriate link
                card.setAttribute("href", isIOS || isSafari ? appStoreLink : playStoreLink);
            });
        });
    </script>

    <header class="header">
        <div class="header-content">
            <img src="assets/atharva-logo.svg" alt="Atharva System">
            <h3 class="heading">Our Apps</h3>
            <p class="subtitle">We have developed apps to serve different needs.</p>
            <img src="assets/head-rounded-mobile.svg" alt="" class="head-rounded-mobile">
            <img src="assets/head-rounded.svg" alt="" class="head-rounded">
        </div>
    </header>
    <section class="apps-group">
        <div class="a-container">
            <div class="a-row">
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharva.expensetracker" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/spendable.svg" alt="Your Money Manager – Spendable">
                        </div>
                        <h2 class="card-title">Your Money Manager – Spendable</h2>
                        <p class="card-rating">
                            <span>4.7</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharvasystem.quickscreenrecorder"
                        class="app-card" target="_blank">
                        <div class="card-img">
                            <img src="assets/screen-recorder.svg" alt="Qveedo - Screen Recorder App">
                        </div>
                        <h2 class="card-title">Qveedo - Screen Recorder App</h2>
                        <p class="card-rating">
                            <span>4.4</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.app.abillion" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/abillion-trade.svg" alt="Abillion Trade Analytics">
                        </div>
                        <h2 class="card-title">Abillion Trade Analytics</h2>
                        <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.app.mobileiptv" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/iptv.svg" alt="IPTV - Smart M3U Player">
                        </div>
                        <h2 class="card-title">IPTV - Smart M3U Player</h2>
                        <p class="card-rating">
                            <span>4.6</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.asapp.texttospeech" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/talkify.svg" alt="Talkify: Text To Speech, Audio">
                        </div>
                        <h2 class="card-title">Talkify: Text To Speech, Audio</h2>
                        <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.moshocart.atharvasystem" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/mosho-cart.svg" alt="Mosho Cart">
                        </div>
                        <h2 class="card-title">Mosho Cart</h2>
                        <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharvaSystem.odooapp" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/mosho-cart-odoo.svg" alt="Mosho Cart Odoo">
                        </div>
                        <h2 class="card-title">Mosho Cart Odoo</h2>
                        <!-- <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p> -->
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharvasystem.todo" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/donezo.svg" alt="DoneZo: To Do List & Calendar">
                        </div>
                        <h2 class="card-title">DoneZo: To Do List & Calendar</h2>
                        <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharva.notesu" class="app-card"
                        target="_blank">
                        <div class="card-img">
                            <img src="assets/notes-u.svg" alt="Notes.U: ColorNote taking, PDF">
                        </div>
                        <h2 class="card-title">Notes.U: ColorNote taking, PDF</h2>
                        <p class="card-rating">
                            <span>4.3</span>
                            <img src="assets/star.svg" alt="">
                        </p>
                    </a>
                </div>
                <div class="a-col-6 a-col-md-3 a-col-lg-4 a-col-lg-5col">
                    <a href="https://play.google.com/store/apps/details?id=com.atharvasystem.spinwheel" class="app-card">
                        <div class="card-img">
                            <img src="assets/spin_wheel.svg" alt="Spin A Wheel: Raffle Generator">
                        </div>
                        <h2 class="card-title">Spin A Wheel: Raffle Generator</h2>
                        <!-- <p class="card-rating">
                            <span>5.0</span>
                            <img src="assets/star.svg" alt="">
                        </p> -->
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

</html>