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