Merge pull request #190 from AnkushMalik/master

Update error pages
SUSE · Feb 5, 2018 · f8a6153 · f8a6153
2 parents dc687db + 2441b97
commit f8a6153
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 41 deletions.
diff --git a/public/404.html b/public/404.html
@@ -1,26 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>The page you were looking for doesn't exist (404)</title>
-  <style type="text/css">
-    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 25em;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-      border: 1px solid #ccc;
-      border-right-color: #999;
-      border-bottom-color: #999;
-    }
-    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
-  </style>
+  <title>Page not Found | Hackweek</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="/assets/stylesheets/common.css">
 </head>
 
 <body>
   <!-- This file lives in public/404.html -->
   <div class="dialog">
-    <h1>The page you were looking for doesn't exist.</h1>
+    <div class="err-code">
+      <span>4</span>
+      <div>(O_o)</div>
+      <span>4</span>
+    </div>
+    <h1>The page you were looking for doesn't exist!</h1>
     <p>You may have mistyped the address or the page may have moved.</p>
+    <p> Head back <a href="/">Home</a> to try finding it again.</p>
   </div>
 </body>
 </html>
diff --git a/public/422.html b/public/422.html
@@ -1,26 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>The change you wanted was rejected (422)</title>
-  <style type="text/css">
-    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 25em;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-      border: 1px solid #ccc;
-      border-right-color: #999;
-      border-bottom-color: #999;
-    }
-    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
+  <meta charset="utf-8">
+  <title>Changes rejected | Hackweek</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="/assets/stylesheets/common.css">
   </style>
 </head>
-
 <body>
   <!-- This file lives in public/422.html -->
   <div class="dialog">
-    <h1>The change you wanted was rejected.</h1>
+    <div class="err-code">
+      <div>422</div>
+      <div>(๏_๏)</div>
+    </div>
+    <h1>The change you wanted was rejected!</h1>
     <p>Maybe you tried to change something you didn't have access to.</p>
+    <p> Head back <a href="/">Home</a></p>
   </div>
 </body>
 </html>
diff --git a/public/500.html b/public/500.html
@@ -1,28 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>We're sorry, but something went wrong (500)</title>
-  <style type="text/css">
-    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 25em;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-      border: 1px solid #ccc;
-      border-right-color: #999;
-      border-bottom-color: #999;
-    }
-    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
-  </style>
+  <meta charset="utf-8">
+  <title>Something went wrong | Hackweek</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="/assets/stylesheets/common.css">
 </head>
 
 <body>
   <!-- This file lives in public/500.html -->
   <div class="dialog">
+    <div class="err-code">
+      <span>5</span>
+      <div>(0_0)</div>
+      <span>0</span>
+    </div>
     <h1>We're sorry, but something went wrong.</h1>
     <p>
        How about you <a href="https://github.com/SUSE/hackweek/issues">file an issue</a> on github and let us know what you did? That would be AWESOME!
     </p>
+    <p> Head back <a href="/">Home</a></p>
   </div>
 </body>
 </html>
diff --git a/public/assets/stylesheets/common.css b/public/assets/stylesheets/common.css
@@ -0,0 +1,28 @@
+body {
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");
+ color: #666;
+ text-align: center;
+ font-family: 'Roboto Mono', monospace;
+ padding: 4em auto 0 auto;
+}
+.dialog{
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.dialog a{
+  color:black;
+  font-weight: bold;
+}
+.dialog .err-code{
+  font-size: 7rem;
+}
+.err-code span{
+  position: relative;
+  right: 4.25rem;
+}
+h1 {
+ font-size: 100%;
+ line-height: 1.5em;
+}