Mobile landingapp

deploy/web/landingapp/src/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import "./styles.css";
 
 import AppRouter from "./AppRouter";
 

deploy/web/landingapp/src/pages/AboutPage/index.js

@@ -1,55 +1,55 @@
 import React from "react";
 import { Link, useHistory } from "react-router-dom";
 
-import "../../styles.css";
+import "./styles.css";
 
 import Unicorn from "../../assets/images/unicorn.jpg";
 
 const AboutPage = (props) => {
   let history = useHistory();
   return (
     <div className="aboutpage-container">
-      <div
-        className="main-container"
-        style={{
-          backgroundColor: "#697b4d",
-          alignItems: "center",
-          height: "90%",
-          padding: "3em",
-        }}
-      >
+      <div className="aboutpage-body">
         <div style={{ width: "100%", flexDirection: "flexStart" }}>
           <div className="back-button" onClick={() => history.goBack()}>
             Back
           </div>
         </div>
-        <h1 style={{ color: "white" }}>About LIGHT</h1>
-        <p style={{ color: "white" }}>
-          LIGHT is a research project focused on creating realistic interactive
-          AI. LIGHT stands for
-          <i>“Learning in Interactive Games with Humans and Text.”</i>
-          The LIGHT game is a direct application of
-          <a href="https://parl.ai/projects/light/"> our research</a>, and also
-          acts as a live environment to allow players to interact with models
-          and other players directly. We believe that by collecting gameplay
-          interactions, we can train better agents to follow stories and create
-          meaningful experiences for players.
-        </p>
-        <p style={{ color: "white" }}>
-          We also feel that model-supported architectures can enable creators to
-          tell their own stories. Thus, much of our project’s research will
-          support user-created content in our world builder. By reducing the
-          barrier of entry to create full, fleshed out worlds, it should be
-          easier for anyone to create and share a slice of fantasy.
-        </p>
-        <p style={{ color: "white" }}>
-          We plan to regularly release complete anonymized and sanitized data
-          collected from within LIGHT, with the goal of enabling other
-          researchers to extend upon our work, and this will be available for
-          download from the project page. The complete source code for the
-          project is available on our github.
-        </p>
-        <img style={{ width: "50%", height: "auto" }} src={Unicorn} />
+        <h1 className="aboutpage-header">About LIGHT</h1>
+        <div className="aboutpage-text__container">
+          <p>
+            LIGHT is a research project focused on creating realistic
+            interactive AI. LIGHT stands for
+            <i>“Learning in Interactive Games with Humans and Text.”</i>
+            The LIGHT game is a direct application of
+            <a
+              style={{ color: "yellow", fontWeight: "bold" }}
+              href="https://parl.ai/projects/light/"
+            >
+              {" "}
+              our research
+            </a>
+            , and also acts as a live environment to allow players to interact
+            with models and other players directly. We believe that by
+            collecting gameplay interactions, we can train better agents to
+            follow stories and create meaningful experiences for players.
+          </p>
+          <p>
+            We also feel that model-supported architectures can enable creators
+            to tell their own stories. Thus, much of our project’s research will
+            support user-created content in our world builder. By reducing the
+            barrier of entry to create full, fleshed out worlds, it should be
+            easier for anyone to create and share a slice of fantasy.
+          </p>
+          <p>
+            We plan to regularly release complete anonymized and sanitized data
+            collected from within LIGHT, with the goal of enabling other
+            researchers to extend upon our work, and this will be available for
+            download from the project page. The complete source code for the
+            project is available on our github.
+          </p>
+        </div>
+        <img className="aboutpage-image" src={Unicorn} />
       </div>
     </div>
   );

deploy/web/landingapp/src/pages/AboutPage/styles.css

@@ -0,0 +1,99 @@
+.aboutpage-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 5em;
+  background-image: url("../../assets/images/InexplicableTavern.png");
+  background-size: cover;
+  height: 100%;
+  overflow: scroll;
+}
+
+.aboutpage-body {
+  width: 100%;
+  background-color: rgba(105, 123, 77, 0.9);
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3em;
+  box-shadow: 0.25em 0.25em 0.25em black;
+}
+
+.aboutpage-text__container {
+  color: white;
+  padding-left: 7px;
+}
+
+.aboutpage-header {
+  text-align: center;
+  color: white;
+}
+
+.aboutpage-text {
+  text-align: center;
+}
+
+.aboutpage-image {
+  height: auto;
+  width: 90%;
+  max-width: 70em;
+}
+
+.back-button {
+  color: gold;
+  font-weight: bolder;
+  cursor: pointer;
+  border-radius: 15px;
+}
+
+.back-button:hover {
+  color: yellow;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.back-button:active {
+  color: yellow;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: 900;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .aboutpage-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    background-image: url("../../assets/images/InexplicableTavern.png");
+    background-size: cover;
+    height: 100%;
+    overflow: scroll;
+    padding: 0;
+  }
+
+  .aboutpage-body {
+    width: 90%;
+    background-color: rgba(105, 123, 77, 0.9);
+    border: darkgray;
+    border-width: 1em;
+    border-style: ridge;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0.25em 0.25em 0.25em black;
+    padding: 0;
+    margin: 0;
+  }
+}

deploy/web/landingapp/src/pages/ErrorPage/index.js

@@ -1,24 +1,19 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import "../../styles.css";
+import "./styles.css";
 
 const ErrorPage = (props) => {
   return (
     <div className="errorpage-container">
-      <div
-        className="main-container"
-        style={{
-          backgroundColor: "#253a20",
-          alignItems: "center",
-          height: "90%",
-          padding: "3em",
-          color: "white",
-          opacity: "0.7",
-          justifyContent: "flex-start",
-        }}
-      >
-        <div style={{ width: "100%", flexDirection: "flexStart" }}>
+      <div className="errorpage-body">
+        <div
+          style={{
+            width: "100%",
+            flexDirection: "flexStart",
+            paddingLeft: "20px",
+          }}
+        >
           <Link style={{ textDecoration: "none", color: "yellow" }} to="/">
             Return Home
           </Link>

deploy/web/landingapp/src/pages/ErrorPage/styles.css

@@ -0,0 +1,60 @@
+.errorpage-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 1em 5em 4em 0.5em;
+  background-image: url("../../assets/images/spider.png");
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(46, 66, 35, 1);
+}
+
+.errorpage-body {
+  width: 80%;
+  opacity: 0.9;
+  border: darkgray;
+  border-width: 1em;
+  border-style: ridge;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  box-shadow: 0.25em 0.25em 0.25em black;
+  background-color: rgba(46, 66, 35, 1);
+  align-items: center;
+  height: 90%;
+  padding: 3em;
+  color: white;
+  opacity: 0.7;
+  justify-content: flex-start;
+}
+
+@media only screen and (max-width: 1224px) {
+}
+
+@media only screen and (max-width: 950px) {
+}
+
+@media only screen and (max-width: 600px) {
+  .errorpage-container {
+    padding: 0;
+    background-image: url("../../assets/images/spider.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .errorpage-body {
+    width: 93%;
+    border-width: 0.5em;
+    padding: 0;
+    background-color: rgba(46, 66, 35, 0.7);
+    align-items: center;
+    height: 90%;
+    padding: 0;
+  }
+}