landingpage/themes/app-landingpage/layouts/_default/single.html

{{ define "main" }}
<div class="main-content">
    <section class="component download pb-0">
        <div class="container h-100">
            <picture class="download-mobile-image d-block d-lg-none">
                <img class="download-mobile-image" src="{{site.BaseURL}}/assets/img/favicon.png"
                    title="{{site.Params.appName}} App" alt="{{site.Params.appName}}-App Smartphone" loading="lazy" />
            </picture>
            <div class="row align-items-end align-items-lg-center justify-content-lg-between h-100">
                <div class="col col-12 col-lg-6 bg-white p-3">
                    <h1 class="headline headline-heavy" id="headline">{{ .Title }}</h1>
                    <h1 class="headline headline-heavy d-none" id="infoUnsupported">{{ i18n "infoUnsupported"
                        site.Params.appName }}</h1>
                    <div class="lead d-none" id="lead">
                        {{ .Content }}
                    </div>
                    <p class="warning d-none" id="warning-ios">{{ i18n "warningIOS" }}</p>
                    <p class="warning d-none" id="warning-android">{{ i18n "warningAndroid" }}</p>
                    <h1 class="headline headline-heavy d-none" id="info-ios">{{ i18n "infoIOS" }}</h1>
                    <h1 class="headline headline-heavy d-none" id="info-android">{{ i18n "infoAndroid" }}</h1>
                    <a class="d-none originalUrl" id="directUrl" href="" target="_blank" rel="noopener noreferrer">{{
                        i18n "directUrl" site.Params.appName }}</a>
                    <a class="d-none originalUrl" id="alternativeUrl" href="" target="_blank"
                        rel="noopener noreferrer">{{ default (i18n "alternativeUrl")
                        .Page.Params.alternativeUrlDescription }}</a>

                    <div class="row">
                        <p class="lead d-none" id="downloadInfo">{{ i18n "downloadInfo" }}</p>
                        {{ range site.Params.stores }}
                        <div class="col col-12 col-md-6 mb-3" id="store_{{ .id }}">
                            <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
                                <img class="img-fluid w-100" src="{{ .badge }}" alt="{{ .name }} Icon" />
                            </a>
                        </div>
                        {{ end }}
                    </div>
                </div>
                <div class="col col-12 col-sm-12 col-md-12 col-lg-5 d-none d-lg-block">
                    <img class="section-main-image" src="{{site.BaseURL}}/assets/img/favicon.png"
                        title="{{site.Params.appName}} App" alt="{{site.Params.appName}}-App Smartphone"
                        loading="lazy" />
                </div>
            </div>
        </div>
    </section>

    <script src="{{site.BaseURL}}/assets/js/ua-parser.pack.js"></script>

    <script>
        const Platforms = { "android": "android", "ios": "ios", "Unsupported": "Unsupported" };
        Object.freeze(Platforms);
        const DirectLinkingCompatibility = { "Full": "Full", "Manual": "Manual", "None": "None" };
        Object.freeze(DirectLinkingCompatibility);

        document.addEventListener("DOMContentLoaded", () => {
            let parser = new UAParser();

            let platform;
            if (Platforms.hasOwnProperty(parser.getOS().name.toLowerCase()))
                platform = parser.getOS().name.toLowerCase();
            else
                platform = Platforms.Unsupported;

            console.log("Detected platform: ", platform);
            console.log("Detected browser: ", parser.getBrowser().name);

            const directLinkingCompatibility = {
                "android": parser.getBrowser().name === "Chrome" ?
                    DirectLinkingCompatibility.Full :
                    (parser.getBrowser().name === "Firefox" ?
                        DirectLinkingCompatibility.Manual :
                        DirectLinkingCompatibility.None),

                "ios": parser.getBrowser().name === "Mobile Safari" ?
                    DirectLinkingCompatibility.Manual :
                    DirectLinkingCompatibility.None,

                "Unsupported": DirectLinkingCompatibility.None
            }[platform];

            console.log("Direct linking compatibility: ", directLinkingCompatibility);

            const originalQuery = sessionStorage.getItem('originalQuery');
            console.log("Original query:", originalQuery);
            sessionStorage.removeItem('originalQuery');
            let directUrl;
            let alternativeUrl;
            if (originalQuery) {
                directUrl = "{{ site.BaseURL }}/" + originalQuery;
                alternativeUrl = "{{ site.Params.alternativeUrl }}" + originalQuery;
            }

            window.history.replaceState({}, document.title, window.location.protocol + "//" + window.location.host + "/" + (originalQuery ? originalQuery : ""));

            if (directUrl && directLinkingCompatibility !== DirectLinkingCompatibility.None) {
                const directUrlElement = document.getElementById("directUrl");
                directUrlElement.classList.remove("d-none");
                directUrlElement.href = directUrl;

                if (directLinkingCompatibility === DirectLinkingCompatibility.Manual)
                    document.getElementById("info-" + platform).classList.remove("d-none");

                document.getElementById("downloadInfo").classList.remove("d-none");
                document.getElementById("headline").classList.add("d-none");
            }
            else if (directUrl && platform !== Platforms.Unsupported && directLinkingCompatibility === DirectLinkingCompatibility.None) {
                document.getElementById("warning-" + platform).classList.remove("d-none");
                document.getElementById("downloadInfo").classList.remove("d-none");
                document.getElementById("headline").classList.add("d-none");
            }
            else if (directUrl && platform === Platforms.Unsupported) {
                const alternativeUrlElement = document.getElementById("alternativeUrl");
                alternativeUrlElement.classList.remove("d-none");
                alternativeUrlElement.href = alternativeUrl;
                document.getElementById("infoUnsupported").classList.remove("d-none");
                document.getElementById("headline").classList.add("d-none");
            }

            switch (platform) {
                case Platforms.ios:
                    document.getElementById("store_google").classList.add("d-none");
                    break;
                case Platforms.android:
                    document.getElementById("store_apple").classList.add("d-none");
                    break;
                case Platforms.Unsupported:
                    document.getElementById("lead").classList.remove("d-none");
                    break;
            }
        });
    </script>

</div>
{{ end }}