<!DOCTYPE HTML>
<html>
<head>
    <title>APP Download</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
            margin:0px;
            padding:0px;
        }
        .appdownload-wrap {
            height:100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            padding-bottom: 20px;
        }
        #pic1{
            width:60px;
            margin-right:10px;
            float:right;
        }
        #pic2{
            width:100%;
            height:80px;
        }
        #logo{
            border-radius:10px;
            max-width: 80px;
            height: auto;
        }
        .pn{
            display:none;
        }
        .appdownload-copyright {
            position:absolute;
            bottom:0px;
            width:100%;
            padding:5px  0  5px  0;
            text-align: center;
        }
        .appdownload-btns {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            width: 100%;
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #fff;
            /*padding: 10px 20px;*/
            border-radius: 5px;
            margin-bottom: 10px;
            width: 80%;
        }
        .ico {
            margin-right: 10px;
        }
        .container {
            margin-top: 20px;
            width: 100%;
            text-align: center;
        }
        .container img {
            max-width: 100px;
            height: auto;
        }

        /* 针对小屏幕的样式 */
        @media (max-width: 767px) {
            .appdownload-btns {
                width: 100%;
            }
            .btn {
                width: 100%;
            }
            #logo {
                max-width: 60px;
            }
            .container img {
                max-width: 80px;
            }
        }

        /* 针对中等屏幕的样式 */
        @media (min-width: 768px) and (max-width: 991px) {
            #logo {
                max-width: 70px;
            }
            .container img {
                max-width: 90px;
            }
        }

        /* 针对大屏幕的样式 */
        @media (min-width: 992px) {
            #logo {
                max-width: 80px;
            }
            .container img {
                max-width: 100px;
            }
        }
    </style>
</head>

<body class="appdownload-body">
<div id="weixinTip" style="display:none">
    <p><img src="/res/images/pic1.png" alt="pic1" id="pic1"/></p>
    <p><img src="/res/images/pic2.png" alt="pic2" id="pic2"/></p>
</div>

<div class="appdownload-wrap">
    <div class="appdownload-logo">
        <img src="/res/images/sitemap.xml.png" id="logo">
        <p class="appname">CloudiCar</p>
    </div>

    <div class="appdownload-btns">
        <a class="btn item-ios" href="https://play.google.com/store/apps/details?id=com.sitemap.xml&amp;hl=en" target="_blank" style="background-color: #06DD6A">
            <span class="ico ico-android"></span>
            <span class="txt" id="android">Android</span>
        </a>
        <a class="btn item-ios" href="https://itunes.apple.com/il/app/id1529386106?l=en" target="_blank" style="background-color: #06DD6A">
            <span class="ico ico-ios"></span>
            <span class="txt" id="iphone">iPhone</span>
        </a>
    </div>

    <div class="container">
        <p id="container_p" style="color:#808080;margin-bottom:5px"></p>
        <img src="/res/images/sitemap.xml_code.png" alt="">
        <p style="color:#808080;margin:30px">Copyright ©  All Rights Reserved</p>
    </div>


</div>

<script type="text/javascript" src="res/ime/scripts/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="res/css/download.css" />
<link rel="stylesheet" type="text/css" href="res/css/g.css" />
<script type="text/javascript">
    // const language = (navigator.language || navigator.browserLanguage).toLowerCase();
    const locale = "en";
    const localeObj = new Intl.Locale(locale);

    if (localeObj.language === 'he') {
        // language is "he"
        $("title").html("הורדת אפליקציה");
        $("#android").html("אנדרואיד");
        $("#iphone").html("אייפון");
        // $("#container_p").html("אנא סרוק את קוד ה-QR עם הדפדפן שלך כדי להורדה.");
    }else if (localeObj.language === 'ar') {
        // language is "ar"
        $("title").html("تحميل التطبيق");
        $("#android").html("أندرويد");
        $("#iphone").html("آيفون");
        // $("#container_p").html("الرجاء مسح رمز QR باستخدام متصفحك لتحميل التطبيق.");
    }else if (localeObj.language === 'tr'){
        $("title").html("Uygulama Yükleyin");
        $("#android").html("Android");
        $("#iphone").html("iPhone");
        // $("#container_p").html("Uygulamayı indirmek için tarayıcınızda QR kodunu tarama.");
    }

    function is_weixin() {
        const ua = navigator.userAgent.toLowerCase();
        // console.log("ua= ",ua)
        const userAgent = navigator.userAgent.toLowerCase();
        return userAgent.indexOf('micromessenger') !== -1;
    }

    const isWeixin = is_weixin();
    const winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;

    if(isWeixin){
        $("#weixinTip").show();
    }
    $("#weixinTip").css({
        "position":"fixed",
        "left":"0",
        "top":"0",
        "height":winHeight,
        "width":"100%",
        "z-index":"1000",
        "background-color":"rgba(0,0,0,0.5)",
        "filter":"alpha(opacity=50)",
    });
</script>
</body>
</html>