From 4a8a806193418f0d34926c314f2b2b837cf14c70 Mon Sep 17 00:00:00 2001
From: Vasile Popescu <elisescu@elisescu.com>
Date: Sat, 12 May 2018 18:31:39 +0200
Subject: [PATCH] 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.
---
 frontend/static/404.css              | 147 +++++++++++++++++++++++++++
 frontend/static/404.html             |  23 +++++
 frontend/static/index.html           |   1 +
 frontend/static/invalid-session.html |   8 ++
 4 files changed, 179 insertions(+)
 create mode 100644 frontend/static/404.css
 create mode 100644 frontend/static/404.html
 create mode 100644 frontend/static/index.html
 create mode 100644 frontend/static/invalid-session.html

diff --git a/frontend/static/404.css b/frontend/static/404.css
new file mode 100644
index 0000000..3395b16
--- /dev/null
+++ b/frontend/static/404.css
@@ -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; }
+}
diff --git a/frontend/static/404.html b/frontend/static/404.html
new file mode 100644
index 0000000..4ffb69a
--- /dev/null
+++ b/frontend/static/404.html
@@ -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>
diff --git a/frontend/static/index.html b/frontend/static/index.html
new file mode 100644
index 0000000..6530b63
--- /dev/null
+++ b/frontend/static/index.html
@@ -0,0 +1 @@
+Hi there
diff --git a/frontend/static/invalid-session.html b/frontend/static/invalid-session.html
new file mode 100644
index 0000000..36bd2bb
--- /dev/null
+++ b/frontend/static/invalid-session.html
@@ -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>
\ No newline at end of file