mirror of https://github.com/elisescu/tty-share
Add some static pages
One used for 404 errors, and the other one being a placeholder of the invalid session case, when the session ID is not recognised.pull/14/merge
parent
602259cdd8
commit
4a8a806193
@ -0,0 +1,147 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
|
||||||
|
|
||||||
|
body {
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background:#48A9E6;
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
font-weight:300;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
text-align:center;
|
||||||
|
font-size:40px;
|
||||||
|
margin-top:40px;
|
||||||
|
margin-bottom:-40px;
|
||||||
|
position:relative;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles:after {
|
||||||
|
content:'';
|
||||||
|
display:inline-block;
|
||||||
|
width:100%;
|
||||||
|
height:100px;
|
||||||
|
background:#fff;
|
||||||
|
position:absolute;
|
||||||
|
top:-50px;
|
||||||
|
left:0;
|
||||||
|
transform:skewY(-4deg);
|
||||||
|
-webkit-transform:skewY(-4deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles {
|
||||||
|
background:#fff;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin-top:-60px;
|
||||||
|
box-shadow:inset -1px -4px 4px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles p {
|
||||||
|
font-size: 240px;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 60px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 9;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles p small {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 100%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles .circle.small {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #48A9E6;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 80px;
|
||||||
|
left: 50%;
|
||||||
|
animation: 7s smallmove infinite cubic-bezier(1,.22,.71,.98);
|
||||||
|
-webkit-animation: 7s smallmove infinite cubic-bezier(1,.22,.71,.98);
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
-webkit-animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles .circle.med {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #48A9E6;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 10%;
|
||||||
|
animation: 7s medmove infinite cubic-bezier(.32,.04,.15,.75);
|
||||||
|
-webkit-animation: 7s medmove infinite cubic-bezier(.32,.04,.15,.75);
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
-webkit-animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circles .circle.big {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #48A9E6;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 200px;
|
||||||
|
right: 0;
|
||||||
|
animation: 8s bigmove infinite;
|
||||||
|
-webkit-animation: 8s bigmove infinite;
|
||||||
|
animation-delay: 3s;
|
||||||
|
-webkit-animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes smallmove {
|
||||||
|
0% { top: 10px; left: 45%; opacity: 1; }
|
||||||
|
25% { top: 300px; left: 40%; opacity:0.7; }
|
||||||
|
50% { top: 240px; left: 55%; opacity:0.4; }
|
||||||
|
75% { top: 100px; left: 40%; opacity:0.6; }
|
||||||
|
100% { top: 10px; left: 45%; opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes smallmove {
|
||||||
|
0% { top: 10px; left: 45%; opacity: 1; }
|
||||||
|
25% { top: 300px; left: 40%; opacity:0.7; }
|
||||||
|
50% { top: 240px; left: 55%; opacity:0.4; }
|
||||||
|
75% { top: 100px; left: 40%; opacity:0.6; }
|
||||||
|
100% { top: 10px; left: 45%; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes medmove {
|
||||||
|
0% { top: 0px; left: 20%; opacity: 1; }
|
||||||
|
25% { top: 300px; left: 80%; opacity:0.7; }
|
||||||
|
50% { top: 240px; left: 55%; opacity:0.4; }
|
||||||
|
75% { top: 100px; left: 40%; opacity:0.6; }
|
||||||
|
100% { top: 0px; left: 20%; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes medmove {
|
||||||
|
0% { top: 0px; left: 20%; opacity: 1; }
|
||||||
|
25% { top: 300px; left: 80%; opacity:0.7; }
|
||||||
|
50% { top: 240px; left: 55%; opacity:0.4; }
|
||||||
|
75% { top: 100px; left: 40%; opacity:0.6; }
|
||||||
|
100% { top: 0px; left: 20%; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bigmove {
|
||||||
|
0% { top: 0px; right: 4%; opacity: 0.5; }
|
||||||
|
25% { top: 100px; right: 40%; opacity:0.4; }
|
||||||
|
50% { top: 240px; right: 45%; opacity:0.8; }
|
||||||
|
75% { top: 100px; right: 35%; opacity:0.6; }
|
||||||
|
100% { top: 0px; right: 4%; opacity: 0.5; }
|
||||||
|
}
|
||||||
|
@keyframes bigmove {
|
||||||
|
0% { top: 0px; right: 4%; opacity: 0.5; }
|
||||||
|
25% { top: 100px; right: 40%; opacity:0.4; }
|
||||||
|
50% { top: 240px; right: 45%; opacity:0.8; }
|
||||||
|
75% { top: 100px; right: 35%; opacity:0.6; }
|
||||||
|
100% { top: 0px; right: 4%; opacity: 0.5; }
|
||||||
|
}
|
@ -0,0 +1,23 @@
|
|||||||
|
<!-- This is taken from: https://colorlib.com/wp/free-404-error-page-templates/ -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/404.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section id="not-found">
|
||||||
|
<div id="title">Something's wrong</div>
|
||||||
|
<div class="circles">
|
||||||
|
<p>404
|
||||||
|
<br>
|
||||||
|
<small>Page not found</small>
|
||||||
|
</p>
|
||||||
|
<span class="circle big"></span>
|
||||||
|
<span class="circle med"></span>
|
||||||
|
<span class="circle small"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
@ -0,0 +1 @@
|
|||||||
|
Hi there
|
@ -0,0 +1,8 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
Invalid session ID. It either doesn't exist, or the tty-sender was closed already.
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue