From aa1d2b163d209c09a4ae47dc21e9ad39be2444fa Mon Sep 17 00:00:00 2001 From: hifous Date: Fri, 21 Dec 2018 17:15:28 +0800 Subject: [PATCH] Fixed mobile end style error && Improved style in iPhone 5 / SE --- elements/function.js | 29 ++++++++++++++--------------- elements/function.min.js | 5 +++-- elements/function.original.js | 19 +++++++++++-------- elements/style.css | 3 +++ elements/style.min.css | 30 +----------------------------- merger.html | 2 ++ 6 files changed, 34 insertions(+), 54 deletions(-) diff --git a/elements/function.js b/elements/function.js index 00561c8..da3b614 100644 --- a/elements/function.js +++ b/elements/function.js @@ -32,14 +32,6 @@ if (navigator.userAgent.match(/Alipay/i)) { document.getElementById("toclick").click(); document.getElementById("titleinfo").innerHTML = "长按识别二维码 向" + myname + "支付"; - // Melt the car door ((( - document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo - document - .getElementById("pending") - .removeChild(document.getElementById("depends")); // remove buttons - document - .getElementById("btncontainer") - .removeChild(document.getElementById("qrcodeclose")); //remove exit buttons } else if (navigator.userAgent.match(/QQ\//i)) { console.log("MOBILE QQ CLIENT"); window.location.href = @@ -47,13 +39,6 @@ if (navigator.userAgent.match(/Alipay/i)) { document.getElementById("titleinfo").innerHTML = "长按识别二维码 向" + myname + "支付"; // Melt the car door ((( - document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo - document - .getElementById("pending") - .removeChild(document.getElementById("depends")); // remove buttons - document - .getElementById("btncontainer") - .removeChild(document.getElementById("qrcodeclose")); // remove exit buttons document .getElementById("qrcontainer") .removeChild(document.getElementById("currentqrcode")); // remove default qrcode (mobile qq only) @@ -81,6 +66,20 @@ if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { } // UserAgent Verify Part Ends +// Removal of useless elements when in wechat and mobile qq +if (/(MicroMessenger|QQ|Alipay)/i.test(navigator.userAgent)) { + var title = ""; + var subtitle = ""; + document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo + document + .getElementById("pending") + .removeChild(document.getElementById("depends")); // remove buttons + document + .getElementById("btncontainer") + .removeChild(document.getElementById("qrcodeclose")); //remove exit buttons + console.log("REMOVAL DONE"); +} + // Verify if `paypal` is defined if (typeof paypal !== "string") { document diff --git a/elements/function.min.js b/elements/function.min.js index 84f4f90..5463ed2 100644 --- a/elements/function.min.js +++ b/elements/function.min.js @@ -1,10 +1,11 @@ // HTML Template Merger - Merge your qrcode quicker. (https://github.com/hifocus/merger) var client;var selected;document.getElementById("i").style.background="url('"+profile+"') no-repeat center/cover";var scale=window.devicePixelRatio;document.getElementById("titleinfo").innerHTML="惶心最帅";if(navigator.userAgent.match(/Alipay/i)){console.log("ALIPAY CLIENT");window.location.href=alipay;} -else if(navigator.userAgent.match(/MicroMessenger\//i)){if(location.href.substr(location.href.lastIndexOf('#')+1)=="showqrcode"&&!selected)document.getElementById('showqrcode').style.display="none";console.log("WECHAT CLIENT");client=wechat;document.getElementById("toclick").click();document.getElementById("titleinfo").innerHTML="长按识别二维码 向"+myname+"支付";document.getElementById("h").removeChild(document.getElementById("i"));document.getElementById("pending").removeChild(document.getElementById("depends"));document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose"));} -else if(navigator.userAgent.match(/QQ\//i)){console.log("MOBILE QQ CLIENT");window.location.href=window.location.href.match(/^[^\#\?]+/)[0]+"#showqrcode";document.getElementById("titleinfo").innerHTML="长按识别二维码 向"+myname+"支付";document.getElementById("h").removeChild(document.getElementById("i"));document.getElementById("pending").removeChild(document.getElementById("depends"));document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose"));document.getElementById("qrcontainer").removeChild(document.getElementById("currentqrcode"));document.getElementById("tenpayonly").src=qrcodeapi+tenpay;} +else if(navigator.userAgent.match(/MicroMessenger\//i)){if(location.href.substr(location.href.lastIndexOf('#')+1)=="showqrcode"&&!selected)document.getElementById('showqrcode').style.display="none";console.log("WECHAT CLIENT");client=wechat;document.getElementById("toclick").click();document.getElementById("titleinfo").innerHTML="长按识别二维码 向"+myname+"支付";} +else if(navigator.userAgent.match(/QQ\//i)){console.log("MOBILE QQ CLIENT");window.location.href=window.location.href.match(/^[^\#\?]+/)[0]+"#showqrcode";document.getElementById("titleinfo").innerHTML="长按识别二维码 向"+myname+"支付";document.getElementById("qrcontainer").removeChild(document.getElementById("currentqrcode"));document.getElementById("tenpayonly").src=qrcodeapi+tenpay;} else{if(location.href.substr(location.href.lastIndexOf('#')+1)=="showqrcode"&&!selected)document.getElementById('showqrcode').style.display="none";document.getElementById('qrcodeclose').onclick=function(){document.getElementById('currentqrcode').innerHTML="";if(document.getElementById('showqrcode').style.display=="flex")document.getElementById('showqrcode').style.display="";}} if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)){console.log("MOBILE BROWSER CLIENT");} else{console.log("DESKTOP BROWSER CLIENT");} +if(/(MicroMessenger|QQ|Alipay)/i.test(navigator.userAgent)){var title="";var subtitle="";document.getElementById("h").removeChild(document.getElementById("i"));document.getElementById("pending").removeChild(document.getElementById("depends"));document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose"));console.log("REMOVAL DONE");} if(typeof paypal!=="string"){document.getElementById("depends").removeChild(document.getElementById("paypalbtn"));console.log("PAYPAL BUTTON REMOVED");} else{function openbox(){selected="yes";window.open(paypal,"_blank","toolbar=no,scrollbars=no,visible=none,width=360,height=640");} console.log("PAYPAL BUTTON OPERATING")} diff --git a/elements/function.original.js b/elements/function.original.js index 0a5c59e..b35612b 100644 --- a/elements/function.original.js +++ b/elements/function.original.js @@ -14,7 +14,7 @@ var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas. document.getElementById("titleinfo").innerHTML = "惶心最帅"; - + // General UserAgent verify rules if (navigator.userAgent.match(/Alipay/i)) { console.log("ALIPAY CLIENT"); @@ -28,10 +28,6 @@ // Click the button, import from js document.getElementById("toclick").click(); document.getElementById("titleinfo").innerHTML = "长按识别二维码 向" + myname + "支付"; - // Melt the car door ((( - document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo - document.getElementById("pending").removeChild(document.getElementById("depends")); // remove buttons - document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose")); //remove exit buttons } else if (navigator.userAgent.match(/QQ\//i)) { @@ -39,9 +35,6 @@ window.location.href = window.location.href.match(/^[^\#\?]+/)[0] + "#showqrcode"; document.getElementById("titleinfo").innerHTML = "长按识别二维码 向" + myname + "支付"; // Melt the car door ((( - document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo - document.getElementById("pending").removeChild(document.getElementById("depends")); // remove buttons - document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose")); // remove exit buttons document.getElementById("qrcontainer").removeChild(document.getElementById("currentqrcode")); // remove default qrcode (mobile qq only) // Import from api document.getElementById("tenpayonly").src = qrcodeapi + tenpay; @@ -63,6 +56,16 @@ } // UserAgent Verify Part Ends + // Removal of useless elements when in wechat and mobile qq + if (/(MicroMessenger|QQ|Alipay)/i.test(navigator.userAgent)) { + var title = ""; + var subtitle = ""; + document.getElementById("h").removeChild(document.getElementById("i")); // remove profile photo + document.getElementById("pending").removeChild(document.getElementById("depends")); // remove buttons + document.getElementById("btncontainer").removeChild(document.getElementById("qrcodeclose")); //remove exit buttons + console.log("REMOVAL DONE"); + } + // Verify if `paypal` is defined if (typeof paypal !== "string") { diff --git a/elements/style.css b/elements/style.css index ab057fa..10eb8bb 100644 --- a/elements/style.css +++ b/elements/style.css @@ -120,6 +120,9 @@ p { .desktop { display: none; } + .h5 { + font-size: 18px; + } } @media all and (min-width: 800px){ diff --git a/elements/style.min.css b/elements/style.min.css index fe989b2..6683f76 100644 --- a/elements/style.min.css +++ b/elements/style.min.css @@ -1,30 +1,2 @@ /* HTML Template Merger - Merge your qrcode quicker. (https://github.com/hifocus/merger) */ -body,html{height:100%;margin:0;background:linear-gradient(-45deg,#ee7752,#ce3e75,#23a6d5,#23d5ab);background-size:400% 400%;-webkit-animation:Gradient 10s ease infinite;-moz-animation:Gradient 10s ease infinite;animation:Gradient 10s ease infinite;-o-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} -@-webkit-keyframes Gradient{0%{background-position:0 50%} -50%{background-position:100% 50%} -100%{background-position:0 50%} -} -@-moz-keyframes Gradient{0%{background-position:0 50%} -50%{background-position:100% 50%} -100%{background-position:0 50%} -} -@keyframes Gradient{0%{background-position:0 50%} -50%{background-position:100% 50%} -100%{background-position:0 50%} -} -.main{position:absolute;top:calc(50% - 207px);width:100%} -.main i{width:200px;height:200px;border-radius:100%;display:block;margin:0 auto;text-align:center} -h2,p{font-weight:400;color:#fff;text-align:center;margin:0;margin-top:20px} -h2{font-size:30px} -p{font-size:16px} -.middlebtn{text-align:center;margin-left:auto;margin-right:auto;opacity:.85} -.details{font-size:20px} -.qrcode{width:50%;height:50%} -.modal-body .content{text-align:center} -@media all and (max-width:800px){.desktop{display:none} -} -@media all and (min-width:800px){.smaller{width:50%;height:auto;margin-left:auto;margin-right:auto} -} -.icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden;font-size:16} -.wechat .alipay .tenpay{display:none} -img{max-width:75%;height:auto;width:auto\9} +html,body{height:100%;margin:0;background:linear-gradient(-45deg,#ee7752,#ce3e75,#23a6d5,#23d5ab);background-size:400% 400%;-webkit-animation:Gradient 10s ease infinite;-moz-animation:Gradient 10s ease infinite;animation:Gradient 10s ease infinite;-o-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.main{position:absolute;top:calc(50% - 207px);width:100%}.main i{width:200px;height:200px;border-radius:100%;display:block;margin:0 auto;text-align:center}p,h2{font-weight:400;color:#fff;text-align:center;margin:0;margin-top:20px}h2{font-size:30px}p{font-size:16px}.middlebtn{text-align:center;margin-left:auto;margin-right:auto;opacity:.85}.details{font-size:20px}.qrcode{width:50%;height:50%}.modal-body .content{text-align:center}@media all and (max-width:800px){.desktop{display:none}.h5{font-size:18px}}@media all and (min-width:800px){.smaller{width:50%;height:auto;margin-left:auto;margin-right:auto}}.icon{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;font-size:16}.wechat .alipay .tenpay{display:none}img{max-width:75%;height:auto;width:auto\9} \ No newline at end of file diff --git a/merger.html b/merger.html index 67b344d..df5c515 100644 --- a/merger.html +++ b/merger.html @@ -26,6 +26,7 @@ + @@ -97,6 +98,7 @@

+