Style error page

6 years ago · 2a1ae00113
parent 65d28e2c4c
commit 2a1ae00113
5 changed files with 83 additions and 12 deletions
--- a/public/unsupported-browsers.css
+++ b/public/unsupported-browsers.css
@ -1,8 +0,0 @@
-body {
-    padding: 50px;
-}
-
-p {
-    text-align: center;
-    font-size: 30px;
-}
--- a/public/unsupported-browsers/browser-chrome.png
+++ b/public/unsupported-browsers/browser-chrome.png
--- a/public/unsupported-browsers/browser-firefox.png
+++ b/public/unsupported-browsers/browser-firefox.png
--- a/public/unsupported-browsers/style.css
+++ b/public/unsupported-browsers/style.css
@ -0,0 +1,64 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+    font: inherit;
+    background: #ebebeb;
+    vertical-align: baseline;
+    text-align: center;
+    font-family: Roboto;
+}
+
+.header {
+    height: 40px;
+    width: 100%;
+    background: #1A1A1A;
+    margin-bottom: 100px;
+}
+
+.unsupported-browsers {
+    width: 100%;
+    font-size: 30px;
+}
+
+.main {
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+}
+
+.box {
+    margin-top: 20px;
+}
+
+p {
+    width: 100%;
+    clear: both;
+    font-size: 15px;
+}
+
+img {
+    clear: both;
+}
+
+a {
+    clear: both;
+    color: #01B757;
+    width: 100%;
+    text-decoration: none;
+    display: block;
+    font-size: 20px;
+}
--- a/src/index.html
+++ b/src/index.html
@ -10,13 +10,28 @@
    <meta name="keywords" content="trezor wallet" />
    <meta name="author" content="satoshilabs s.r.o." />
    <meta name="viewport" content="width=1024, initial-scale=1">
-    <!--[if lte IE 8]>
-        <link media="all" rel="stylesheet" href="/unsupported-browsers.css" />
+    <!--[if lt IE 9]>
+        <link media="all" rel="stylesheet" href="/unsupported-browsers/style.css" />
+        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <![endif]-->
 </head>
 <body>
-     <!--[if lte IE 8]>
-        <p class="unsupported-ie">This page is not supported for IE8 and lower versions of IE.</p>
+    <!--[if lt IE 9]>
+     <div class="unsupported-browsers">
+        <div class="header"></div>
+        <h1>Your browser is not supported</h1>
+        <p>Please choose one of the supported browsers</p>
+        <div class="main">
+            <div class="box left">
+                <img src="/unsupported-browsers/browser-chrome.png">
+                <a href="https://www.google.com/chrome/" target="_blank" rel="noreferrer noopener">Get Chrome</a>
+            </div>
+            <div class="box right">
+                <img src="/unsupported-browsers/browser-firefox.png">
+                <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noreferrer noopener">Get Firefox</a>
+            </div>
+        </div>
+    </div>
    <![endif]-->
    <div id="root"></div>
 </body>