update: optimize error page, add aero glass effect

4 years ago · 49761347a2
7 changed files with 18 additions and 8 deletions
--- a/assets/error/css/style.css
+++ b/assets/error/css/style.css
--- a/assets/error/fonts/icons.woff
+++ b/assets/error/fonts/icons.woff
--- a/assets/error/js/custom.js
+++ b/assets/error/js/custom.js
--- a/assets/error/main.js
+++ b/assets/error/main.js
--- a/assets/error/style.css
+++ b/assets/error/style.css
--- a/error.html
+++ b/error.html
@ -8,7 +8,7 @@

    <title>Dnomd343 - IP</title>

-    <link href="/assets/error/css/style.css" rel="stylesheet">
+    <link href="/assets/error/style.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">

    <noscript>
@ -54,7 +54,7 @@
 			Typekit.load();
 		} catch(e) {}
 	</script>
-    <script src="/assets/error/js/custom.js"></script>
+    <script src="/assets/error/main.js"></script>

 </body>
 </html>
--- a/index.html
+++ b/index.html
@ -74,13 +74,26 @@
            right: 0;
        }
    }
+
+    #output {
+        background-color: rgba(255, 255, 255, 0.92);
+    }
+
+    @supports ((-webkit-backdrop-filter: saturate() blur()) or (backdrop-filter: saturate() blur())) {
+        #output {
+            background-color: rgba(255, 255, 255, 0.6);
+            -webkit-backdrop-filter: saturate(150%) blur(10px);
+            backdrop-filter: saturate(150%) blur(10px);
+        }
+    }
+    
 </style>

 <body>
    <div class="hero is-fullheight is-app-grey mapbox-hero">
        <div id="main-hero" class="hero-body" style="padding: 0;">
            <div class="has-text-centered is-subheader-caption positioncontrol" style="padding-bottom: 0;">
-                <div class="contact-page-form flex-card" style="background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(1.5px);">
+                <div id="output" class="contact-page-form flex-card">
                    <h3 id="sub-title">
                        <a href="https://github.com/dnomd343/echoIP" target="_blank" title="Source code on Github">echoIP</a>
                    </h3>