From cfacb77d15197a820194a3ab7698d7e0a29b25f1 Mon Sep 17 00:00:00 2001
From: MengYX <admin@mengyx.cn>
Date: Tue, 3 Mar 2020 20:00:44 +0800
Subject: [PATCH] Optimize loader tips for outdated browser

---
 public/index.html | 101 +++++++++++++++++++++++++++++++---------------
 1 file changed, 68 insertions(+), 33 deletions(-)
diff --git a/public/index.html b/public/index.html
index 51e4a05..9d44073 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,8 @@
 <html lang="zh-CN">
 <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta content="webkit" name="renderer">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="width=device-width,initial-scale=1.0" name="viewport">
     <script>var _paq = window._paq || [];
     _paq.push(['setRequestMethod', 'POST'], ['trackPageView'], ['enableLinkTracking'], ['setSiteId', '2'],
@@ -12,7 +13,40 @@
     <title>音乐解锁 - By IXarea</title>
     <meta content="音乐,解锁,ncm,qmc,qmc0,qmc3,qmcflac,qmcogg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
     <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
-    <style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#loader-mask{position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,0.88)}</style>
+    <style>#loader {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1010;
+        margin: -75px 0 0 -75px;
+        border: 16px solid #f3f3f3;
+        border-radius: 50%;
+        border-top: 16px solid #3498db;
+        width: 120px;
+        height: 120px;
+        animation: spin 2s linear infinite
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg)
+        }
+        100% {
+            transform: rotate(360deg)
+        }
+    }
+
+    #loader-mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 1009;
+        background-color: rgba(242, 246, 252, 0.88)
+    }</style>
 </head>
 <body>
 
@@ -23,45 +57,46 @@
              src="https://stats.ixarea.com/ixarea-stats/report?idsite=2&rec=1&action_name=音乐解锁+-+By+IXarea"
              style="border:0"/>
     </noscript>
-    <strong id="tips">音乐解锁采用了一些新特性！建议使用
+    <div hidden id="loader-tips-outdated">
+        <h2>您可能在使用不受支持的<span style="color:#f00;">过时</span>浏览器，这可能导致此应用无法正常工作。</h2>
+        <h3>如果您使用双核浏览器，您可以尝试切换<span style="color:#f00;">“极速模式”</span>解决此问题。</h3>
+        <h3>或者，您可以尝试更换下方的几个浏览器之一。</h3>
+    </div>
+    <h3 hidden id="loader-tips-timeout">
+        音乐解锁采用了一些新特性！建议使用
+        <a href="https://www.microsoftedgeinsider.com/zh-cn/download" target="_blank">Microsoft Edge Chromium</a>
         <a href="https://www.google.cn/chrome/" target="_blank">Google Chrome</a>
         <a href="https://www.firefox.com.cn/" target="_blank">Mozilla Firefox</a>
-        <a href="https://www.microsoftedgeinsider.com/zh-cn/download" target="_blank">Microsoft Edge</a>
         | <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
-    </strong>
+    </h3>
 </div>
 <div id="app"></div>
 <script>
-(function () {
-    //判断UA以识别浏览器类型
-    var ua = navigator && navigator.userAgent;
-    var orzed = (function () {
-        var m;
-        if (!ua) return true;
-        if (/MSIE |Trident\//.exec(ua)) return true; // no IE
-        m = /Edge\/([\d.]+)/.exec(ua); // Edge >= 16
-        if (m && Number(m[1]) < 16) return true;
-        m = /Chrome\/([\d.]+)/.exec(ua); // Chrome >= 50
-        if (m && Number(m[1]) < 50) return true;
-        m = /Firefox\/([\d.]+)/.exec(ua); // Firefox >= 38
-        if (m && Number(m[1]) < 38) return true;
+    (function () {
+        setTimeout(function () {
+            var ele = document.getElementById("loader-tips-timeout");
+            if (ele != null) {
+                ele.hidden = false;
+            }
+        }, 2000);
 
-        return false;
+        var ua = navigator && navigator.userAgent;
+        var detected = (function () {
+            var m;
+            if (!ua) return true;
+            if (/MSIE |Trident\//.exec(ua)) return true; // no IE
+            m = /Edge\/([\d.]+)/.exec(ua); // Edge >= 16
+            if (m && Number(m[1]) < 16) return true;
+            m = /Chrome\/([\d.]+)/.exec(ua); // Chrome >= 50
+            if (m && Number(m[1]) < 50) return true;
+            m = /Firefox\/([\d.]+)/.exec(ua); // Firefox >= 38
+            return m && Number(m[1]) < 38;
+        })();
+        if (detected) {
+            document.getElementById('loader-tips-outdated').hidden = false;
+            document.getElementById("loader-tips-timeout").hidden = false;
+        }
     })();
-
-    //定义输出文本，使用HTML格式
-    var infoHTML =
-        '<h1>您可能在使用不受支持的<b style="color:#f00;">过时</b>浏览器，这会导致加载出现问题。</h1>' +
-        '<h2>如果您使用国产浏览器，请在右上方选择<b style="color:#f00;">“极速模式”</b>，而非“兼容模式”。</h2>' +
-        '<h2>推荐使用基于 Chromium 的最新版本的 <a target="_blank" href="https://www.microsoft.com/zh-cn/windows/microsoft-edge" style="color:#f62;">Microsoft Edge 浏览器</a> 访问本站</h2>' +
-        '<h4>UA调试区：' + ua + '</h4>';
-
-    var elem = document.getElementById('tips');
-    window.browser_orzed = orzed;
-    if (orzed) {
-        elem.innerHTML = infoHTML;
-    };
-})();
 </script>
 </body>
 </html>
