Skip to content

Commit 0354ce4

Browse files
capedcrusader23capedcrusader23
authored
Merge pull request #148 from Rupeshiya/issue#142
added error page for uncaught requests
2 parents da137dc + db02ab0 commit 0354ce4

File tree

4 files changed

+191
-30
lines changed

4 files changed

+191
-30
lines changed

‎package-lock.json

Lines changed: 11 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎server.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ app.use(passport.initialize());
3737
app.use(passport.session());
3838

3939
app.use(indexRoutes);
40+
41+
app.get('**',(req,res)=>{
42+
res.render('error');
43+
});
44+
4045
//Snapshot after routing
4146
const diff = hd.end();
4247
//Diff between both snapshots

‎views/css/error.css

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
body {
2+
width:100%;
3+
height:100%;
4+
background:#48A9E6;
5+
font-family: 'Raleway', sans-serif;
6+
font-weight:300;
7+
margin:0;
8+
padding:0;
9+
}
10+
11+
#title {
12+
text-align:center;
13+
font-size:40px;
14+
margin-top:40px;
15+
margin-bottom:-40px;
16+
position:relative;
17+
color:#fff;
18+
}
19+
20+
.circles:after {
21+
content:'';
22+
display:inline-block;
23+
width:100%;
24+
height:100px;
25+
background:#fff;
26+
position:absolute;
27+
top:-50px;
28+
left:0;
29+
transform:skewY(-4deg);
30+
-webkit-transform:skewY(-4deg);
31+
}
32+
33+
.circles {
34+
background:#fff;
35+
text-align: center;
36+
position: relative;
37+
margin-top:-60px;
38+
box-shadow:inset -1px -4px 4px rgba(0,0,0,0.2);
39+
}
40+
41+
.circles p {
42+
font-size: 240px;
43+
color: #fff;
44+
padding-top: 60px;
45+
position: relative;
46+
z-index: 9;
47+
line-height: 100%;
48+
}
49+
50+
.circles p small {
51+
font-size: 40px;
52+
line-height: 100%;
53+
vertical-align: top;
54+
}
55+
56+
.circles .circle.small {
57+
width: 140px;
58+
height: 140px;
59+
border-radius: 50%;
60+
background: #48A9E6;
61+
position: absolute;
62+
z-index: 1;
63+
top: 80px;
64+
left: 50%;
65+
animation: 7s smallmove infinite cubic-bezier(1,.22,.71,.98);
66+
-webkit-animation: 7s smallmove infinite cubic-bezier(1,.22,.71,.98);
67+
animation-delay: 1.2s;
68+
-webkit-animation-delay: 1.2s;
69+
}
70+
71+
.circles .circle.med {
72+
width: 200px;
73+
height: 200px;
74+
border-radius: 50%;
75+
background: #48A9E6;
76+
position: absolute;
77+
z-index: 1;
78+
top: 0;
79+
left: 10%;
80+
animation: 7s medmove infinite cubic-bezier(.32,.04,.15,.75);
81+
-webkit-animation: 7s medmove infinite cubic-bezier(.32,.04,.15,.75);
82+
animation-delay: 0.4s;
83+
-webkit-animation-delay: 0.4s;
84+
}
85+
86+
.circles .circle.big {
87+
width: 400px;
88+
height: 400px;
89+
border-radius: 50%;
90+
background: #48A9E6;
91+
position: absolute;
92+
z-index: 1;
93+
top: 200px;
94+
right: 0;
95+
animation: 8s bigmove infinite;
96+
-webkit-animation: 8s bigmove infinite;
97+
animation-delay: 3s;
98+
-webkit-animation-delay: 1s;
99+
}
100+
101+
@-webkit-keyframes smallmove {
102+
0% { top: 10px; left: 45%; opacity: 1; }
103+
25% { top: 300px; left: 40%; opacity:0.7; }
104+
50% { top: 240px; left: 55%; opacity:0.4; }
105+
75% { top: 100px; left: 40%; opacity:0.6; }
106+
100% { top: 10px; left: 45%; opacity: 1; }
107+
}
108+
@keyframes smallmove {
109+
0% { top: 10px; left: 45%; opacity: 1; }
110+
25% { top: 300px; left: 40%; opacity:0.7; }
111+
50% { top: 240px; left: 55%; opacity:0.4; }
112+
75% { top: 100px; left: 40%; opacity:0.6; }
113+
100% { top: 10px; left: 45%; opacity: 1; }
114+
}
115+
116+
@-webkit-keyframes medmove {
117+
0% { top: 0px; left: 20%; opacity: 1; }
118+
25% { top: 300px; left: 80%; opacity:0.7; }
119+
50% { top: 240px; left: 55%; opacity:0.4; }
120+
75% { top: 100px; left: 40%; opacity:0.6; }
121+
100% { top: 0px; left: 20%; opacity: 1; }
122+
}
123+
124+
@keyframes medmove {
125+
0% { top: 0px; left: 20%; opacity: 1; }
126+
25% { top: 300px; left: 80%; opacity:0.7; }
127+
50% { top: 240px; left: 55%; opacity:0.4; }
128+
75% { top: 100px; left: 40%; opacity:0.6; }
129+
100% { top: 0px; left: 20%; opacity: 1; }
130+
}
131+
132+
@-webkit-keyframes bigmove {
133+
0% { top: 0px; right: 4%; opacity: 0.5; }
134+
25% { top: 100px; right: 40%; opacity:0.4; }
135+
50% { top: 240px; right: 45%; opacity:0.8; }
136+
75% { top: 100px; right: 35%; opacity:0.6; }
137+
100% { top: 0px; right: 4%; opacity: 0.5; }
138+
}
139+
@keyframes bigmove {
140+
0% { top: 0px; right: 4%; opacity: 0.5; }
141+
25% { top: 100px; right: 40%; opacity:0.4; }
142+
50% { top: 240px; right: 45%; opacity:0.8; }
143+
75% { top: 100px; right: 35%; opacity:0.6; }
144+
100% { top: 0px; right: 4%; opacity: 0.5; }
145+
}

‎views/error.ejs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
8+
<!-- Material Design Bootstrap -->
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css?family=Raleway:300,700" rel="stylesheet">
11+
<!-- Your custom styles (optional) -->
12+
<link href="/css/error.css" type="text/css" rel="stylesheet">
13+
<title>404</title>
14+
</head>
15+
<body>
16+
<section id="not-found">
17+
<div id="title">OOPS!!</div>
18+
<div class="circles">
19+
<p>404<br>
20+
<small>PAGE NOT FOUND<br>
21+
<a class="btn btn-big btn-info" href="/">Go Back</a>
22+
</small>
23+
</p>
24+
<span class="circle big"></span>
25+
<span class="circle med"></span>
26+
<span class="circle small"></span>
27+
</div>
28+
</section>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)