Change 403 page. No dependancies
This commit is contained in:
parent
b39eda7cf7
commit
21edc0be10
|
|
@ -1,92 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="generator" content=
|
||||
"HTML Tidy for HTML5 for Linux version 5.6.0">
|
||||
<title>403 Forbidden</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
:root {
|
||||
--background: #34373d;
|
||||
|
||||
--eye-back: #e8e8e8;
|
||||
--eye-iris: gold;
|
||||
--eye-pupil: #202020;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ED7267;
|
||||
font-family: "roboto";
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: var(--background);
|
||||
|
||||
color: #FFFFFF;
|
||||
font-family: 'Inter UI', sans-serif;
|
||||
}
|
||||
body .overlay {
|
||||
width: 100vw;
|
||||
|
||||
.Content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
body .overlay.open .left {
|
||||
transition: all 0.3s;
|
||||
transform: translate(-100%);
|
||||
|
||||
.Content-item {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
body .overlay.open .right {
|
||||
transition: all 0.3s;
|
||||
transform: translate(100%);
|
||||
|
||||
#eye-back {
|
||||
fill: var(--eye-back);
|
||||
}
|
||||
body .overlay .fa-lock {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 58px;
|
||||
transition: all 0.3s;
|
||||
|
||||
#eye-iris {
|
||||
fill: var(--eye-iris);
|
||||
animation: eyemove 5s ease infinite;
|
||||
}
|
||||
body .overlay .fa-lock:hover {
|
||||
color: #1BA650;
|
||||
|
||||
#eye-pupil {
|
||||
fill: var(--eye-pupil);
|
||||
animation: eyemove 5s ease infinite;
|
||||
}
|
||||
body .overlay .left {
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
background: #FFC475;
|
||||
}
|
||||
body .overlay .right {
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
background: #FFC475;
|
||||
}
|
||||
body .content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
|
||||
.Content-item {
|
||||
text-align: center;
|
||||
}
|
||||
body .content h1 {
|
||||
text-transform: uppercase;
|
||||
|
||||
.title {
|
||||
font-size: calc(16px + 2vmin);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: calc(12px + 0.8vmin);
|
||||
}
|
||||
|
||||
@keyframes eyemove {
|
||||
0% {
|
||||
cx: 100px;
|
||||
}
|
||||
17.5% {
|
||||
cx: 50px;
|
||||
}
|
||||
27.5% {
|
||||
cx: 50px;
|
||||
}
|
||||
62.5% {
|
||||
cx: 150px;
|
||||
}
|
||||
72.5% {
|
||||
cx: 150px;
|
||||
}
|
||||
90% {
|
||||
cx: 100px;
|
||||
}
|
||||
100% {
|
||||
cx: 100px;
|
||||
}
|
||||
body .content h1, body .content h2 {
|
||||
margin: 100px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Forbidden</h1>
|
||||
<h2>You don't have permission to access this server.</h2>
|
||||
<div class="Content">
|
||||
<svg height="80" width="200" class="Content-item">
|
||||
<defs>
|
||||
<clippath id="eye-iris-clip">
|
||||
<path d=
|
||||
"M 25 40 q 75 -60 150 0 M 25 40 q 75 60 150 0"></path>
|
||||
</clippath>
|
||||
</defs>
|
||||
<path id="eye-back" d=
|
||||
"M 25 40 q 75 -60 150 0 M 25 40 q 75 60 150 0"></path>
|
||||
<circle cx="100" cy="40" r="23" id="eye-iris" clip-path=
|
||||
"url(#eye-iris-clip)"></circle>
|
||||
<circle cx="100" cy="40" r="5" id="eye-pupil" clip-path=
|
||||
"url(#eye-iris-clip)"></circle></svg> <svg width="155" height=
|
||||
"225" class="Content-item">
|
||||
<rect class="server-item" x="2.5" y="2.5" width="150" height=
|
||||
"50" rx="5" ry="5" fill="none" stroke-width="5" stroke=
|
||||
"#FFFFFF"></rect>
|
||||
<rect x="27.5" y="27.5" width="62.5" height="1" rx="0.5" ry=
|
||||
"0.5" fill="none" stroke-width="5" stroke="#FFFFFF"></rect>
|
||||
<rect x="27.5" y="77.5" width="62.5" height="1" rx="0.5" ry=
|
||||
"0.5" fill="none" stroke-width="5" stroke="#FFFFFF"></rect>
|
||||
<circle cx="125" cy="27.5" r="10" stroke="#FFFFFF"
|
||||
stroke-width="5" fill="#40ff40"></circle>
|
||||
<rect class="server-item" x="2.5" y="52.5" width="150" height=
|
||||
"50" rx="5" ry="5" fill="none" stroke-width="5" stroke=
|
||||
"#FFFFFF"></rect>
|
||||
<rect x="27.5" y="127.5" width="62.5" height="1" rx="0.5" ry=
|
||||
"0.5" fill="none" stroke-width="5" stroke="#FFFFFF"></rect>
|
||||
<circle cx="125" cy="77.5" r="10" stroke="#FFFFFF"
|
||||
stroke-width="5" fill="#ff6060"></circle>
|
||||
<rect class="server-item" x="2.5" y="102.5" width="150" height=
|
||||
"50" rx="5" ry="5" fill="none" stroke-width="5" stroke=
|
||||
"#FFFFFF"></rect>
|
||||
<circle cx="125" cy="127.5" r="10" stroke="#FFFFFF"
|
||||
stroke-width="5" fill="#40ff40"></circle>
|
||||
<line x1="57.5" y1="162.5" x2="92.5" y2="162.5" stroke="gray"
|
||||
stroke-width="5"></line>
|
||||
<line x1="75" y1="152.5" x2="75" y2="175" stroke="white"
|
||||
stroke-width="5"></line>
|
||||
<line x1="0" y1="175" x2="155" y2="175" stroke="white"
|
||||
stroke-width="5"></line>
|
||||
<line x1="60" y1="162.5" x2="60" y2="180" stroke="gray"
|
||||
stroke-width="5"></line>
|
||||
<line x1="90" y1="162.5" x2="90" y2="180" stroke="gray"
|
||||
stroke-width="5"></line>
|
||||
<rect x="50" y="170" width="50" height="50" rx="5" ry="5" fill=
|
||||
"gold"></rect>
|
||||
<circle cx="75" cy="190.5" r="10" fill="#cc8200"></circle>
|
||||
<polygon points="75,180 69,210 81,210" fill=
|
||||
"#cc8200"></polygon></svg>
|
||||
<div class="Content-item">
|
||||
<span class="title">Uh Oh!</span><br>
|
||||
<span class="desc">It looks like the resource you are trying to access is forbidden.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
<script>
|
||||
let lock = document.querySelector(".fa-lock");
|
||||
let overlay = document.querySelector(".overlay");
|
||||
lock.addEventListener('mouseover', () => {
|
||||
overlay.classList.add("open");
|
||||
})
|
||||
lock.addEventListener('mouseleave', () => {
|
||||
overlay.classList.remove("open");
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue