fly883/web
1
0
Fork 0
forked from um/web
Code Pull Requests Activity

Optimize loader tips for outdated browser

Browse Source
This commit is contained in:
MengYX 2020-03-03 20:00:44 +08:00
parent 5f7461e8aa
commit cfacb77d15
No known key found for this signature in database
GPG Key ID: E63F9C7303E8F604
1 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/index.html
View File

@ -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,19 +57,31 @@
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以识别浏览器类型
setTimeout(function () {
var ele = document.getElementById("loader-tips-timeout");
if (ele != null) {
ele.hidden = false;
}
}, 2000);
var ua = navigator && navigator.userAgent;
var orzed = (function () {
var detected = (function () {
var m;
if (!ua) return true;
if (/MSIE |Trident\//.exec(ua)) return true; // no IE
@ -44,23 +90,12 @@
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;
return false;
return m && Number(m[1]) < 38;
})();
//定义输出文本，使用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;
};
if (detected) {
document.getElementById('loader-tips-outdated').hidden = false;
document.getElementById("loader-tips-timeout").hidden = false;
}
})();
</script>
</body>