No Javascript / Old Browser Blockers (#274)
* Add messages for no js and bad browser. Share styles with alpha agreement. * Bad browser checks and shower. * No flash of bad browser * Typsecriptify * Move all checks directly to HTML to avoid issues. * remove duplicate badBrowser declaration
This commit is contained in:
William O'Beirne
Daniel Ternyak
parent
f719aeebcf
commit
a92ea252fc
|
|
@ -0,0 +1,33 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.5 15.5 224.5 224.5">
|
||||
<defs>
|
||||
<radialGradient cy="0" cx="0.5" id="r">
|
||||
<stop stop-color="#f06b59"/>
|
||||
<stop offset="1" stop-color="#df2227"/>
|
||||
</radialGradient>
|
||||
<radialGradient r="0.76" cy="0.3" cx="0.65" id="g">
|
||||
<stop offset="0.65" stop-color="#4cb749"/>
|
||||
<stop offset="1" stop-color="#388b41"/>
|
||||
</radialGradient>
|
||||
<radialGradient r="0.8" cy="0.25" cx="0.36" id="y">
|
||||
<stop offset="0.6" stop-color="#FCD209"/>
|
||||
<stop offset="0.7" stop-color="#f7c616"/>
|
||||
<stop offset="1" stop-color="#bc821e"/>
|
||||
</radialGradient>
|
||||
<radialGradient r="1" cy="0" cx="0.5" spreadMethod="pad" id="cf">
|
||||
<stop offset="0.1" stop-color="#7FB3DF"/>
|
||||
<stop offset="0.9" stop-color="#0F5B94"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="cb" r="1" cy="0" cx="0.5">
|
||||
<stop offset="0" stop-color="#F6F0EE"/>
|
||||
<stop offset="1" stop-color="#ddd"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<path d="m198,148a70,70 0 0 0 -140,0l20,0a50,50 0 0 1 100,0" fill-opacity="0.1"/>
|
||||
<circle r="45" cx="127.5" cy="127.6" fill="url(#cf)" stroke="url(#cb)" stroke-width="9" />
|
||||
<path d="m228,78a112,112 0 0 0 -193,-13l45,78a50,50 0 0 1 47,-65" fill="url(#r)"/>
|
||||
<path d="m35,65a112,112 0 0 0 84,174l47,-80a50,50 0 0 1 -86,-16" fill="url(#g)"/>
|
||||
<path d="m119,239a112,112 0 0 0 109,-161l-101,0a50,50 0 0 1 39,81" fill="url(#y)"/>
|
||||
<path d="m35,65l45,78a50,50 0 0 1 2,-34l-45,-47" opacity="0.075"/>
|
||||
<path d="m119,239l47,-80a50,50 0 0 1 -29,17l-20,63" opacity="0.05"/>
|
||||
<path d="m228,78l-101,0a50,50 0 0 1 39,19l64,-16" opacity="0.05"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 140 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="9.75 9.75 100.5 100.5"><linearGradient id="a" gradientTransform="matrix(0 97.396584 -97.396584 0 51.620814 11.389501)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ff1b2d"/><stop offset=".3" stop-color="#ff1b2d"/><stop offset=".61" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" gradientTransform="matrix(0 86.142511 -86.142511 0 76.85435 17.130095)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/><stop offset="1" stop-color="#ff4b4b"/></linearGradient><path d="m60 9.75c-27.75 0-50.25 22.5-50.25 50.25l0 0c0 26.95 21.22 48.94 47.86 50.19l0 0c .8.04 1.59.06 2.39.06l0 0c12.87 0 24.6-4.84 33.49-12.79l0 0c-5.89 3.91-12.78 6.15-20.14 6.15l0 0c-11.97 0-22.68-5.94-29.89-15.3l0 0c-5.56-6.56-9.15-16.25-9.4-27.13l0 0c0-.03 0-2.34 0-2.37l0 0c .25-10.88 3.84-20.58 9.4-27.13l0 0c7.21-9.36 17.93-15.3 29.89-15.3l0 0c7.36 0 14.25 2.25 20.14 6.16l0 0c-8.84-7.91-20.51-12.74-33.3-12.79l0 0c-.06 0-.13 0-.19 0z" fill="url(#a)"/><path d="m43.46 31.68c4.61-5.44 10.57-8.73 17.07-8.73l0 0c14.63 0 26.49 16.59 26.49 37.04l0 0c0 20.46-11.86 37.04-26.49 37.04l0 0c-6.51 0-12.46-3.28-17.07-8.72l0 0c7.21 9.36 17.92 15.3 29.89 15.3l0 0c7.36 0 14.25-2.25 20.14-6.15l0 0c10.29-9.2 16.76-22.57 16.76-37.46l0 0c0-14.88-6.47-28.26-16.76-37.46l0 0c-5.89-3.91-12.78-6.15-20.14-6.15l0 0c-11.97 0-22.68 5.94-29.89 15.3" fill="url(#b)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,33 +1,11 @@
|
|||
@import "common/sass/variables";
|
||||
@import "common/sass/mixins";
|
||||
|
||||
.AlphaAgreement {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@include cover-message;
|
||||
background: $brand-warning;
|
||||
overflow: auto;
|
||||
z-index: 10000;
|
||||
|
||||
&-content {
|
||||
max-width: 520px;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(#000, 0.12);
|
||||
overflow: auto;
|
||||
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
padding-top: 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,25 +2,129 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MyEtherWallet</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<title>MyEtherWallet</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="/dll.vendor.js"></script>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#0e97c0">
|
||||
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#163151">
|
||||
<script src="/dll.vendor.js"></script>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#0e97c0">
|
||||
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#163151">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app"></div>
|
||||
|
||||
<noscript class="NoScript">
|
||||
<div class="NoScript-content">
|
||||
<h2>You Must Enable Javascript to Continue</h2>
|
||||
<p>
|
||||
MyEtherWallet requires Javascript to run. There are no security
|
||||
vulnerabilities as a result of enabling Javascript on MyEtherWallet, as
|
||||
we do not load any external scripts such as advertisements or trackers.
|
||||
</p>
|
||||
<p>
|
||||
If you are not sure why you are seeing this message, or are unsure of
|
||||
how to enable Javascript, please visit
|
||||
<a href="https://www.enable-javascript.com/" rel="noopener" target="_blank">enable-javascript.com</a>
|
||||
to learn more.
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div class="BadBrowser" style="display: none;">
|
||||
<div class="BadBrowser-content">
|
||||
<h2>Your Browser is Out of Date</h2>
|
||||
<p class="is-desktop">
|
||||
MyEtherWallet requires certain features that your browser doesn't offer.
|
||||
Your browser may also be missing security updates that could open you up
|
||||
to vulnerabilities. Please update your browser, or switch to one of the
|
||||
following browsers ones to continue using MyEtherWallet.
|
||||
</p>
|
||||
<p class="is-mobile">
|
||||
MyEtherWallet requires certain features that your browser doesn't offer.
|
||||
Please use your device's default browser, or switch to a laptop or
|
||||
computer to continue using MyEtherWallet.
|
||||
</p>
|
||||
<div class="BadBrowser-content-browsers is-desktop">
|
||||
<a
|
||||
class="BadBrowser-content-browsers-browser firefox"
|
||||
href="https://www.mozilla.org/en-US/firefox/new/"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="BadBrowser-content-browsers-browser-name">
|
||||
Firefox
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="BadBrowser-content-browsers-browser chrome"
|
||||
href="https://www.google.com/chrome/browser/desktop/index.html"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="BadBrowser-content-browsers-browser-name">
|
||||
Chrome
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="BadBrowser-content-browsers-browser opera"
|
||||
href="http://www.opera.com/"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="BadBrowser-content-browsers-browser-name">
|
||||
Opera
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var badBrowser = false;
|
||||
|
||||
try {
|
||||
// Let and const
|
||||
eval('let a = 1;');
|
||||
eval('const b = 1');
|
||||
|
||||
// Object.assign
|
||||
Object.assign({}, {});
|
||||
|
||||
// Local storage
|
||||
window.localStorage.setItem('test', 'test');
|
||||
window.localStorage.removeItem('test');
|
||||
|
||||
// Flexbox
|
||||
var el = document.createElement('div');
|
||||
el.style.display = 'flex';
|
||||
if (el.style.display !== 'flex') {
|
||||
badBrowser = false;
|
||||
}
|
||||
} catch (err) {
|
||||
badBrowser = true;
|
||||
}
|
||||
|
||||
if (badBrowser) {
|
||||
var el = document.getElementsByClassName('BadBrowser')[0];
|
||||
el.className += ' is-open';
|
||||
// Dumb check for known mobile OS's. Not important to catch all, just
|
||||
// displays more appropriate information.
|
||||
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||
el.className += ' is-mobile';
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -33,3 +33,39 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Alpha agreement, noscript, bad browser, etc.
|
||||
@mixin cover-message {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background: $brand-info;
|
||||
z-index: $zindex-top;
|
||||
|
||||
&-content {
|
||||
max-width: 580px;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(#000, 0.12);
|
||||
overflow: auto;
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
|
||||
|
||||
// --- CUSTOM ---
|
||||
@import "./styles/badbrowser";
|
||||
@import "./styles/noscript";
|
||||
@import "./styles/overrides";
|
||||
@import "./styles/scaffolding";
|
||||
@import "./styles/tab";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
@import "common/sass/variables";
|
||||
@import "common/sass/mixins";
|
||||
|
||||
.BadBrowser {
|
||||
@include cover-message;
|
||||
|
||||
&.is-open {
|
||||
// Override inline display none
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-browsers {
|
||||
text-align: center;
|
||||
|
||||
&-browser {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
margin: 5%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
&-name {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
color: rgba(#fff, 0.8);
|
||||
}
|
||||
|
||||
&.chrome {
|
||||
background-image: url('~assets/images/browsers/chrome.svg');
|
||||
}
|
||||
|
||||
&.firefox {
|
||||
background-image: url('~assets/images/browsers/firefox.svg');
|
||||
}
|
||||
|
||||
&.opera {
|
||||
background-image: url('~assets/images/browsers/opera.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide mobile specific messaging by default
|
||||
.is-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-mobile {
|
||||
.is-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import "common/sass/variables";
|
||||
@import "common/sass/mixins";
|
||||
|
||||
.NoScript {
|
||||
@include cover-message;
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
@import "./variables/tables";
|
||||
@import "./variables/buttons";
|
||||
@import "./variables/forms";
|
||||
@import "./variables/zindex";
|
||||
|
||||
// Misc.
|
||||
$border-radius-small: 0px;
|
||||
|
|
|
|||
|
|
@ -6,3 +6,5 @@ $zindex-navbar-fixed: 1030;
|
|||
$zindex-modal-background: 1040;
|
||||
$zindex-modal: 1050;
|
||||
$zindex-alerts: 1060;
|
||||
|
||||
$zindex-top: 10000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue