Prepare frontend repository for monorepo

This change prepares the frontend Git repository for the monorepo
residing at https://github.com/atlarge-research.com/opendc. To
accomodate for this, we move all files into a frontend subdirectory.

6 files changed, 177 insertions, 0 deletions

diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js
new file mode 100644
index 00000000..eea89e7b
--- /dev/null
+++ b/frontend/src/components/not-found/BlinkingCursor.js
@@ -0,0 +1,6 @@
+import React from "react";
+import "./BlinkingCursor.css";
+
+const BlinkingCursor = () => <span className="blinking-cursor">_</span>;
+
+export default BlinkingCursor;
diff --git a/frontend/src/components/not-found/BlinkingCursor.sass b/frontend/src/components/not-found/BlinkingCursor.sass
new file mode 100644
index 00000000..6be1476d
--- /dev/null
+++ b/frontend/src/components/not-found/BlinkingCursor.sass
@@ -0,0 +1,35 @@
+.blinking-cursor
+  -webkit-animation: 1s blink step-end infinite
+  -moz-animation: 1s blink step-end infinite
+  -o-animation: 1s blink step-end infinite
+  animation: 1s blink step-end infinite
+
+@keyframes blink
+  from, to
+    color: #eeeeee
+  50%
+    color: #333333
+
+@-moz-keyframes blink
+  from, to
+    color: #eeeeee
+  50%
+    color: #333333
+
+@-webkit-keyframes blink
+  from, to
+    color: #eeeeee
+  50%
+    color: #333333
+
+@-ms-keyframes blink
+  from, to
+    color: #eeeeee
+  50%
+    color: #333333
+
+@-o-keyframes blink
+  from, to
+    color: #eeeeee
+  50%
+    color: #333333
diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js
new file mode 100644
index 00000000..46dc4402
--- /dev/null
+++ b/frontend/src/components/not-found/CodeBlock.js
@@ -0,0 +1,34 @@
+import React from "react";
+import "./CodeBlock.css";
+
+const CodeBlock = () => {
+  const textBlock =
+    "    oo      oooo       oo   <br/>" +
+    "   oo      oo  oo     oo    <br/>" +
+    "  oo       oo  oo    oo     <br/>" +
+    " oooooo    oo  oo   oooooo  <br/>" +
+    "     oo    oo  oo       oo  <br/>" +
+    "     oo     oooo        oo  <br/>";
+  const charList = textBlock.split("");
+
+  // Binary representation of the string "OpenDC!" ;)
+  const binaryString =
+    "01001111011100000110010101101110010001000100001100100001";
+
+  let binaryIndex = 0;
+  for (let i = 0; i < charList.length; i++) {
+    if (charList[i] === "o") {
+      charList[i] = binaryString[binaryIndex];
+      binaryIndex++;
+    }
+  }
+
+  return (
+    <div
+      className="code-block"
+      dangerouslySetInnerHTML={{ __html: textBlock }}
+    />
+  );
+};
+
+export default CodeBlock;
diff --git a/frontend/src/components/not-found/CodeBlock.sass b/frontend/src/components/not-found/CodeBlock.sass
new file mode 100644
index 00000000..51a3d3d0
--- /dev/null
+++ b/frontend/src/components/not-found/CodeBlock.sass
@@ -0,0 +1,3 @@
+.code-block
+  white-space: pre-wrap
+  margin-top: 60px
diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js
new file mode 100644
index 00000000..c6b8b78b
--- /dev/null
+++ b/frontend/src/components/not-found/TerminalWindow.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import BlinkingCursor from "./BlinkingCursor";
+import CodeBlock from "./CodeBlock";
+import "./TerminalWindow.css";
+
+const TerminalWindow = () => (
+  <div className="terminal-window">
+    <div className="terminal-header">Terminal -- bash</div>
+    <div className="terminal-body">
+      <div className="segfault">
+        $ status<br />
+        opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br
+        />
+        opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br />
+        opendc[4270]: STDERR Page does not exist<br />
+      </div>
+      <CodeBlock />
+      <div className="sub-title">
+        Got lost?<BlinkingCursor />
+      </div>
+      <Link to="/" className="home-btn">
+        <span className="fa fa-home" /> GET ME BACK TO OPENDC
+      </Link>
+    </div>
+  </div>
+);
+
+export default TerminalWindow;
diff --git a/frontend/src/components/not-found/TerminalWindow.sass b/frontend/src/components/not-found/TerminalWindow.sass
new file mode 100644
index 00000000..4f51a77f
--- /dev/null
+++ b/frontend/src/components/not-found/TerminalWindow.sass
@@ -0,0 +1,70 @@
+.terminal-window
+  width: 600px
+  height: 400px
+  display: block
+
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+
+  margin: auto
+
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  cursor: default
+
+  overflow: hidden
+
+  box-shadow: 5px 5px 20px #444444
+
+.terminal-header
+  font-family: monospace
+  background: #cccccc
+  color: #444444
+  height: 30px
+  line-height: 30px
+  padding-left: 10px
+
+  border-top-left-radius: 7px
+  border-top-right-radius: 7px
+
+.terminal-body
+  font-family: monospace
+  text-align: center
+  background-color: #333333
+  color: #eeeeee
+  padding: 10px
+
+  height: 100%
+
+.segfault
+  text-align: left
+
+.sub-title
+  margin-top: 20px
+
+.home-btn
+  margin-top: 10px
+  padding: 5px
+  display: inline-block
+  border: 1px solid #eeeeee
+  color: #eeeeee
+  text-decoration: none
+  cursor: pointer
+
+  -webkit-transition: all 200ms
+  -moz-transition: all 200ms
+  -o-transition: all 200ms
+  transition: all 200ms
+
+.home-btn:hover
+  background: #eeeeee
+  color: #333333
+
+.home-btn:active
+  background: #333333
+  color: #eeeeee