-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
120 lines (109 loc) · 3.33 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arvo" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section class="page_404">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="four_zero_four_bg">
<h1 class="text-center">404</h1>
</div>
<div class="contant_box_404">
<h3 class="h2">Looks like you're lost!</h3>
<p>The page you're looking for is not avalible!</p>
<p id="closest"></p>
<a href="flashleap.github.io" class="link_404">Go to Home</a
><a class="link_404" onclick="history.back()"
>Return to the previous page</a
>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.page_404 {
padding: 40px 0;
background: #fff;
font-family: 'Arvo', serif;
}
.page_404 img {
width: 100%;
}
.four_zero_four_bg {
background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}
.four_zero_four_bg h1 {
font-size: 80px;
}
.four_zero_four_bg h3 {
font-size: 80px;
}
.link_404 {
transition-duration: 0.5s;
border-radius: 5px;
margin: 20px;
color: #fff !important;
padding: 10px 20px;
background: #39ac31;
display: inline-block;
}
.link_404:hover {
background-color: #34a02c;
}
.contant_box_404 {
margin-top: -50px;
}
</style>
</body>
<script>
// Function for load
var url = window.location.pathname;
url = url.replace('.html', '');
url = url.replace(/\//, '');
if (editDistance(closest(url), url) < 3) {
window.location.href = `http://bathills.github.io/${closest(url)}.html`;
} else if editDistance(closest(url), url) > 10 {
document.getElementById('closest').innerHTML = '';
} else {
var newurl = closest(url);
document.getElementById('closest').innerHTML = `Did you mean "<a href='${newurl}.html'>${newurl}.html</a>" ?`;
}
if (url === '404') {
document.getElementById('closest').innerHTML = 'Why would you purposely navigate to this page.';
} // Functions function closest(str) { var urls=['index', 'blog' , 'projects' ]; urls.sort((a, b)=> editDistance(a, str) - editDistance(str, b));
return urls[0];
}
function editDistance(s1, s2) {
s1 = s1.toLowerCase();
s2 = s2.toLowerCase();
var costs = new Array();
for (var i = 0; i <= s1.length; i++) {
var lastValue = i;
for (var j = 0; j <= s2.length; j++) {
if (i == 0) costs[j] = j;
else {
if (j > 0) {
var newValue = costs[j - 1];
if (s1.charAt(i - 1) != s2.charAt(j - 1))
newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
costs[j - 1] = lastValue;
lastValue = newValue;
}
}
}
if (i > 0) costs[s2.length] = lastValue;
}
return costs[s2.length];
}
</script>