From 73c9c043a0c77bb9649e68c8fb24fd4d0448098f Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 20:42:50 -0400 Subject: [PATCH 1/8] restyled home page --- .../landingapp/src/pages/LandingPage/index.js | 248 ++++++++-------- deploy/web/landingapp/src/styles.css | 277 ++++++++++++------ 2 files changed, 310 insertions(+), 215 deletions(-) diff --git a/deploy/web/landingapp/src/pages/LandingPage/index.js b/deploy/web/landingapp/src/pages/LandingPage/index.js index 8acc992f5..63c641848 100644 --- a/deploy/web/landingapp/src/pages/LandingPage/index.js +++ b/deploy/web/landingapp/src/pages/LandingPage/index.js @@ -22,133 +22,139 @@ const LandingPage = (props) => {

Welcome to the world of LIGHT

-
-
-
-
- -
- {page !== 0 ? ( -
pageChangeHandler("-")} - className="instruction-arrow__container" - > -

{"<"}

-
- ) : ( -
- )} - {page !== 2 ? ( -
pageChangeHandler("+")} - className="instruction-arrow__container " - > -

{">"}

-
- ) : ( -
- )} +
+
+
+
+
+ +
+ {page !== 0 ? ( +
pageChangeHandler("-")} + className="instruction-arrow__container" + > +

{"<"}

+
+ ) : ( +
+ )} + {page !== 2 ? ( +
pageChangeHandler("+")} + className="instruction-arrow__container " + > +

{">"}

+
+ ) : ( +
+ )} +
+
+
+ {page == 0 ? ( + <> +

+ The Dungeon Master is glad to see you. +

+ + ) : null} + {page == 1 ? ( + <> +

+ Roleplay your Character +

+

+ You will be teleported into our mystical realm and fill + the shoes of a character who lives there — playing that + role you must act and talk with other LIGHT denizens. As + you interact, your messages will be evaluated by the + Dungeon Master AI. Portray your character well and you + will increase your experience points. +

+

+ Other characters will also be playing their roles as + well — some of them will be other human souls, others + will be AIs. When everyone is playing their role to the + best of their ability in the realm the experience will + be maximized. You can reward other players when + you are impressed by their skills. You can also{" "} + report or demote unwanted behaviors: e.g., + mentions of the real world or bad behavior. Stay good, + my denizens! +

+ + ) : null} + {page == 2 ? ( + <> +

+ Interact with the World +

+

+ Talking: Talking is the most important part of + playing your role in the world. You can say, whisper, + shout or tell something to other individuals — all using + free-form text, e.g. + + tell the smithy “I’d love to own such a fine tool! It + looks like wonderful craftsmanship, well done!”{" "} + + . +

+

+ Emotes: You can also express your emotions in the + game with + emote actions, e.g. smile, grin, scream or{" "} + dance. +

+

+ Actions: You can move into new locations (e.g.,{" "} + go west), pick up objects (e.g., get tool + ), give objects (e.g., + give tool to smithy), wear clothing, wield + weapons, eat, drink, try to steal objects, and more. + Type + help + in game for the full list of actions. +

+ + ) : null}
-
-
- {page == 0 ? ( - <> -

- The Dungeon Master is glad to see you. -

- - ) : null} - {page == 1 ? ( - <> -

- Roleplay your Character -

-

- You will be teleported into our mystical realm and fill - the shoes of a character who lives there — playing that - role you must act and talk with other LIGHT denizens. As - you interact, your messages will be evaluated by the - Dungeon Master AI. Portray your character well and you - will increase your experience points. -

-

- Other characters will also be playing their roles as well - — some of them will be other human souls, others will be - AIs. When everyone is playing their role to the best of - their ability in the realm the experience will be - maximized. You can reward other players when you - are impressed by their skills. You can also report{" "} - or demote unwanted behaviors: e.g., mentions of the real - world or bad behavior. Stay good, my denizens! -

- - ) : null} - {page == 2 ? ( - <> -

- Interact with the World -

-

- Talking: Talking is the most important part of - playing your role in the world. You can say, whisper, - shout or tell something to other individuals — all using - free-form text, e.g. - - tell the smithy “I’d love to own such a fine tool! It - looks like wonderful craftsmanship, well done!”{" "} - - . -

-

- Emotes: You can also express your emotions in the - game with - emote actions, e.g. smile, grin, scream or{" "} - dance. -

-

- Actions: You can move into new locations (e.g.,{" "} - go west), pick up objects (e.g., get tool), - give objects (e.g., - give tool to smithy), wear clothing, wield weapons, - eat, drink, try to steal objects, and more. Type - help - in game for the full list of actions. -

- - ) : null}
-
-
-
- -
-

Play Now

-
- - -
-

How To Play

-
- - -
-

About

-
- +
+
+ +
+

Play Now

+
+ + +
+

How To Play

+
+ + +
+

About

+
+ +
-
-

Usage terms

-

- You should read our{" "} - - terms - {" "} - regarding how we process and use data that you send to LIGHT. You - are accepting these terms by playing the game. -

+
+
+

Usage terms

+

+ You should read our{" "} + + terms + {" "} + regarding how we process and use data that you send to LIGHT. You + are accepting these terms by playing the game. +

+
diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index 7e1d0a667..d0075a9fc 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -411,18 +411,6 @@ body .fadeShow { color: black; } -.neon-text2 { - color: #fff; - text-shadow: 0.1vw 0vw 0.25vw #d0d3ec, 0.2vw 0vw 0.25vw #d0d3ec, - 0.4vw 0vw 0.25vw #d0d3ec, 0.1vw 0vw 0vw #d0d3ec, 0.2vw 0vw 0vw #d0d3ec, - 0.4vw 0vw 0vw #d0d3ec, 0.1vw 0vw 0.1vw #9798c5, 0.2vw 0vw 0.1vw #9798c5, - 0.4vw 0vw 0.1vw #9798c5, 0.1vw 0vw 2vw #6061c9, 0.2vw 0vw 2vw #6061c9, - 0.4vw 0vw 2vw #6061c9, 0.1vw 0vw 1vw #2d2ba1, 0.2vw 0vw 1vw #2d2ba1, - 0.4vw 0vw 5vw #2d2ba1, 0.1vw 0vw 5vw #181ab1, 0.2vw 0vw 20vw #181ab1, - 0.4vw 0vw 10vw #181ab1, 0.1vw 0vw 10vw #04139e, 0.2vw 0vw 30vw #04139e, - 0.4vw 0vw 10vw #04139e; -} - .header-text { font-size: 80px; text-align: center; @@ -441,24 +429,6 @@ body .fadeShow { } } -.header-text2 { - font-size: 80px; - text-align: center; - color: #fff; - animation: glow 1s ease-in-out infinite alternate; -} - -@keyframes glow { - from { - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, - 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6; - } - to { - text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, - 0 0 40px #0073e6, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6; - } -} - .app-container { height: 100vh; width: 100vw; @@ -543,7 +513,7 @@ body .fadeShow { /* Component Containers*/ .main-container { width: 100%; - height: 80%; + height: 100%; background-color: gray; opacity: 0.9; border: darkgray; @@ -555,6 +525,10 @@ body .fadeShow { padding: 5px; box-shadow: 0.25em 0.25em 0.25em black; } +.main-section { + display: flex; + flex-direction: row; +} .instructions-container { width: 100%; @@ -574,32 +548,13 @@ body .fadeShow { padding: 2em; border-radius: 15px; display: flex; - height: 90%; + height: 40em; width: 80%; flex-direction: row; margin: 1em; - overflow: scroll; - box-shadow: 0.25em 0.25em 0.25em black; -} - -.instruction-bubble2 { - border: white; - border-width: 1em; - border-style: solid; - border-radius: 15px; - flex-direction: column; - padding: 2em; - border-radius: 15px; - display: flex; - align-items: center; - justify-content: center; - width: 70%; /* Full width */ - height: auto; /* Full height */ - margin: 10%; + overflow-y: scroll; box-shadow: 0.25em 0.25em 0.25em black; - box-shadow: 0 0 0.1vw 0.4vw #fff7f7, 0 0 0.4vw 0.6vw #74ace4, - 0 0 4vw 0.4vw #0073e6, inset 0 0 1.5vw 0.4vw #0073e6, - inset 0 0 0.4vw 0.2vw #74ace4, inset 0 0 0.5vw 0.2vw #fff7f7; + overflow-x: hidden; } .instruction-arrow__container { @@ -615,27 +570,25 @@ body .fadeShow { cursor: pointer; } -.instruction-arrow__container2 { - height: 3em; - width: 3em; - border-radius: 1.5em; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0.25em 0.25em 0.5em black; - margin: 0.5em; - cursor: pointer; -} - .instruction-text__container { width: 70%; text-align: left; + height: 100%; } -.instruction-text2 { - color: white; - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, - 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6; +.instruction-welcome { + font-size: 2.5em; + text-align: center; +} + +.instruction-header { + color: gold; + text-align: center; +} +.instruction-text { + text-align: left; + font-size: 1.5em; + text-align: center; } .instruction-arrow__container:active { @@ -648,21 +601,24 @@ body .fadeShow { text-align: center; font-weight: bold; } +.instruction-arrow__placeholder { + margin: 0.5em; + width: 3em; +} .arrowbox { display: flex; flex-direction: row; - width: 100%; - justify-content: center; + justify-content: flex-start; } .guide-container { - width: 30%; + width: 35%; + flex-direction: column; justify-content: center; } .guide-img { - height: 10em; - width: 10em; + height: 30%; border-style: solid; border-color: chocolate; box-shadow: 0.25em 0.5em 0.5em black; @@ -671,6 +627,7 @@ body .fadeShow { .menu-container__section { display: flex; width: 30%; + height: 100%; justify-content: flex-start; align-items: center; } @@ -683,14 +640,6 @@ body .fadeShow { align-items: center; } -.menu-container2 { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - .menu-item { width: 20em; justify-content: center; @@ -701,25 +650,21 @@ body .fadeShow { box-shadow: 0.25em 0.25em 0.5em black; } -.menu-item2 { - width: 20em; - justify-content: center; - align-items: center; - text-align: center; - cursor: pointer; +.menu-item__text { + font-size: 3em; } .menu-item :hover { color: yellow; } -.menu-item2 :hover { - color: grey; -} - .menu-item:active { box-shadow: 0em 0em 0em black; } +.terms-section { + width: 100%; +} + .terms-container { display: flex; text-align: center; @@ -897,7 +842,7 @@ body .fadeShow { } } -@media only screen and (max-width: 870px) { +@media only screen and (max-width: 950px) { .main-container { overflow: scroll; } @@ -944,7 +889,151 @@ body .fadeShow { justify-content: center; align-items: center; } +} + +@media only screen and (max-width: 600px) { + /* Landing Page */ + .landingpage-container { + padding: 2px 10px 2px 10px; + background-image: url("./assets/images/InexplicableTavern.png"); + background-size: cover; + height: 100%; + overflow: scroll; + } + + .main-container { + width: 80%; + height: 100%; + min-height: 80vh; + } + + .header-text { + font-size: 40px; + } + + .instructions-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } + + .instructions-container__section { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .instruction-bubble { + height: 40vh; + width: 90%; + flex-direction: column; + align-items: flex-start; + overflow-x: hidden; + } + + .instruction-arrow__container { + background-color: gold; + height: 3em; + width: 3em; + border-radius: 1.5em; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0.25em 0.25em 0.5em black; + margin: 0.5em; + cursor: pointer; + } + + .instruction-text__container { + width: 100%; + } + + .instruction-welcome { + font-size: 1em; + } + + .instruction-header { + color: gold; + text-align: center; + font-size: 12px; + } + + .instruction-text { + text-align: left; + font-size: 0.5em; + text-align: center; + } + + .instruction-arrow__placeholder { + margin: 0.5em; + width: 3em; + } + + .arrowbox { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; + } + + .guide-container { + width: 85%; + flex-direction: row; + padding: 0.2em; + } + + .guide-img { + height: 6em; + border-style: solid; + border-color: chocolate; + box-shadow: 0.25em 0.25em 0.5em black; + margin-bottom: 0.5em; + margin-left: 2em; + } + .menu-container__section { + display: flex; + width: 100%; + align-items: center; + } + + .menu-container { + width: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .menu-item { + width: 10em; + justify-content: center; + align-items: center; + text-align: center; + background-color: red; + color: white; + border-radius: 15px; + box-shadow: 0.25em 0.25em 0.5em black; + } + + .menu-item__text { + font-size: 1em; + } + + .menu-item :hover { + color: yellow; + } + + .menu-item:active { + box-shadow: 0em 0em 0em black; + } .terms-container { - margin-top: 10em; + display: flex; + text-align: center; + width: 100%; + flex-direction: column; + margin: 0; } } From b4fa629938e2e110bc08c004a71568e393727462 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 20:54:19 -0400 Subject: [PATCH 2/8] fixed sizing bug --- deploy/web/landingapp/src/styles.css | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index d0075a9fc..09df1e9e2 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -513,7 +513,6 @@ body .fadeShow { /* Component Containers*/ .main-container { width: 100%; - height: 100%; background-color: gray; opacity: 0.9; border: darkgray; @@ -548,7 +547,7 @@ body .fadeShow { padding: 2em; border-radius: 15px; display: flex; - height: 40em; + height: 45em; width: 80%; flex-direction: row; margin: 1em; @@ -812,7 +811,6 @@ body .fadeShow { } .main-container { width: 100%; - height: 100%; background-color: gray; opacity: 0.9; border: darkgray; @@ -837,15 +835,15 @@ body .fadeShow { justify-content: center; } .menu-container { - flex-direction: row; + flex-direction: column; justify-content: space-around; } + .menu-item__text { + font-size: 2em; + } } @media only screen and (max-width: 950px) { - .main-container { - overflow: scroll; - } .instructions-container__section { width: 100%; height: 100%; @@ -858,13 +856,10 @@ body .fadeShow { padding: 1em; border-radius: 15px; display: flex; - height: 100%; - width: 80%; - display: flex; flex-direction: column; + align-items: center; margin: 1em; overflow: scroll; - align-items: center; } .guide-container { width: 100%; From 036a2bf9473744b35f77efb0ec3902542fbd86d6 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 21:42:52 -0400 Subject: [PATCH 3/8] refactored landing app --- deploy/web/landingapp/src/index.js | 1 + .../landingapp/src/pages/AboutPage/styles.css | 66 +++ .../landingapp/src/pages/LandingPage/index.js | 2 +- .../src/pages/LandingPage/styles.css | 430 ++++++++++++++++++ deploy/web/landingapp/src/styles.css | 410 ----------------- 5 files changed, 498 insertions(+), 411 deletions(-) create mode 100644 deploy/web/landingapp/src/pages/AboutPage/styles.css create mode 100644 deploy/web/landingapp/src/pages/LandingPage/styles.css diff --git a/deploy/web/landingapp/src/index.js b/deploy/web/landingapp/src/index.js index 0811601bc..ad4c2acc1 100755 --- a/deploy/web/landingapp/src/index.js +++ b/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"; diff --git a/deploy/web/landingapp/src/pages/AboutPage/styles.css b/deploy/web/landingapp/src/pages/AboutPage/styles.css new file mode 100644 index 000000000..bd39a3ca3 --- /dev/null +++ b/deploy/web/landingapp/src/pages/AboutPage/styles.css @@ -0,0 +1,66 @@ +.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; +} + +/* Component Containers*/ +.main-container { + width: 100%; + background-color: gray; + 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; +} + +/* Back Button */ +.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; + padding: 1em 5em 4em 5em; + background-size: cover; + height: 100%; + overflow: scroll; + } + .aboutpage-body { + } +} diff --git a/deploy/web/landingapp/src/pages/LandingPage/index.js b/deploy/web/landingapp/src/pages/LandingPage/index.js index 63c641848..ebb9583f4 100644 --- a/deploy/web/landingapp/src/pages/LandingPage/index.js +++ b/deploy/web/landingapp/src/pages/LandingPage/index.js @@ -4,7 +4,7 @@ import "react-tippy/dist/tippy.css"; import "emoji-mart/css/emoji-mart.css"; import Scribe from "../../assets/images/scribe.png"; -import "../../styles.css"; +import "./styles.css"; const LandingPage = (props) => { let [page, setPage] = useState(0); diff --git a/deploy/web/landingapp/src/pages/LandingPage/styles.css b/deploy/web/landingapp/src/pages/LandingPage/styles.css new file mode 100644 index 000000000..bea4e6b8b --- /dev/null +++ b/deploy/web/landingapp/src/pages/LandingPage/styles.css @@ -0,0 +1,430 @@ +.header-text { + font-size: 80px; + text-align: center; + color: #fff; + animation: pulse 1s ease-in-out infinite alternate; +} + +@keyframes pulse { + from { + text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eef079, 0 0 20px #eef079, + 0 0 25px #eef079, 0 0 30px #eef079, 0 0 35px #eef079; + } + to { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #eef079, + 0 0 40px #eef079, 0 0 50px #eef079, 0 0 60px #eef079, 0 0 70px #eef079; + } +} + +.landingpage-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; +} + +.main-container { + width: 100%; + background-color: gray; + 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; +} + +.main-section { + display: flex; + flex-direction: row; +} + +.instructions-container { + width: 100%; + height: 80%; + display: flex; + flex-direction: row; +} + +.instructions-container__section { + width: 60%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.instruction-bubble { + background-color: whitesmoke; + padding: 2em; + border-radius: 15px; + display: flex; + height: 45em; + width: 80%; + flex-direction: row; + margin: 1em; + overflow-y: scroll; + box-shadow: 0.25em 0.25em 0.25em black; + overflow-x: hidden; +} + +.instruction-arrow__container { + background-color: gold; + height: 3em; + width: 3em; + border-radius: 1.5em; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0.25em 0.25em 0.5em black; + margin: 0.5em; + cursor: pointer; +} + +.instruction-text__container { + width: 70%; + text-align: left; + height: 100%; +} + +.instruction-welcome { + font-size: 2.5em; + text-align: center; +} + +.instruction-header { + color: gold; + text-align: center; +} +.instruction-text { + text-align: left; + font-size: 1.5em; + text-align: center; +} + +.instruction-arrow__container:active { + box-shadow: 0em 0em 0em black; +} + +.instruction-arrow { + color: white; + font-size: 2em; + text-align: center; + font-weight: bold; +} +.instruction-arrow__placeholder { + margin: 0.5em; + width: 3em; +} + +.arrowbox { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.guide-container { + width: 35%; + flex-direction: column; + justify-content: center; +} + +.guide-img { + height: 30%; + border-style: solid; + border-color: chocolate; + box-shadow: 0.25em 0.5em 0.5em black; + margin-bottom: 0.5em; +} +.menu-container__section { + display: flex; + width: 30%; + height: 100%; + justify-content: flex-start; + align-items: center; +} + +.menu-container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.menu-item { + width: 20em; + justify-content: center; + align-items: center; + text-align: center; + background-color: red; + color: white; + box-shadow: 0.25em 0.25em 0.5em black; +} + +.menu-item__text { + font-size: 3em; +} + +.menu-item :hover { + color: yellow; +} + +.menu-item:active { + box-shadow: 0em 0em 0em black; +} +.terms-section { + width: 100%; +} + +.terms-container { + display: flex; + text-align: center; + width: 100%; + flex-direction: column; +} + +@media only screen and (max-width: 1224px) { + .instructions-container { + width: 100%; + height: 80%; + display: flex; + flex-direction: column; + } + .instructions-container__section { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + .main-container { + width: 100%; + background-color: gray; + opacity: 0.9; + border: darkgray; + border-width: 1em; + border-style: ridge; + border-radius: 15px; + display: flex; + flex-direction: column; + padding: 5px; + justify-content: space-between; + box-shadow: 0.25em 0.25em 0.25em black; + } + .terms-container { + display: flex; + align-items: center; + width: 100%; + flex-direction: column; + } + .menu-container__section { + width: 100%; + align-items: center; + justify-content: center; + } + .menu-container { + flex-direction: column; + justify-content: space-around; + } + .menu-item__text { + font-size: 2em; + } +} + +@media only screen and (max-width: 950px) { + .instructions-container__section { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + .instruction-bubble { + background-color: whitesmoke; + padding: 1em; + border-radius: 15px; + display: flex; + flex-direction: column; + align-items: center; + margin: 1em; + overflow: scroll; + } + .guide-container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .guide-img { + height: auto; + width: 30%; + min-width: 112px; + border-style: solid; + border-color: chocolate; + box-shadow: 0.25em 0.5em 0.5em black; + margin-bottom: 0.5em; + } + .menu-container { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + +@media only screen and (max-width: 600px) { + /* Landing Page */ + .landingpage-container { + padding: 2px 10px 2px 10px; + background-size: cover; + overflow: scroll; + } + + .main-container { + width: 80%; + overflow-x: hidden; + } + + .header-text { + font-size: 40px; + } + + .instructions-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } + + .instructions-container__section { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .instruction-bubble { + height: 40vh; + width: 90%; + flex-direction: column; + align-items: flex-start; + overflow-x: hidden; + } + + .instruction-arrow__container { + background-color: gold; + height: 3em; + width: 3em; + border-radius: 1.5em; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0.25em 0.25em 0.5em black; + margin: 0.5em; + cursor: pointer; + } + + .instruction-text__container { + width: 100%; + } + + .instruction-welcome { + font-size: 1em; + } + + .instruction-header { + color: gold; + text-align: center; + font-size: 12px; + } + + .instruction-text { + text-align: left; + font-size: 0.5em; + text-align: center; + } + + .instruction-arrow__placeholder { + margin: 0.5em; + width: 3em; + } + + .arrowbox { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; + } + + .guide-container { + width: 85%; + flex-direction: row; + padding: 0.2em; + } + + .guide-img { + height: 6em; + border-style: solid; + border-color: chocolate; + box-shadow: 0.25em 0.25em 0.5em black; + margin-bottom: 0.5em; + margin-left: 2em; + } + .menu-container__section { + display: flex; + width: 100%; + align-items: center; + } + + .menu-container { + width: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .menu-item { + width: 10em; + justify-content: center; + align-items: center; + text-align: center; + background-color: red; + color: white; + border-radius: 15px; + box-shadow: 0.25em 0.25em 0.5em black; + } + + .menu-item__text { + font-size: 1em; + } + + .menu-item :hover { + color: yellow; + } + + .menu-item:active { + box-shadow: 0em 0em 0em black; + } + + .terms-section { + height: 100%; + } + .terms-container { + display: flex; + text-align: center; + width: 100%; + flex-direction: column; + margin: 0; + } +} diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index 09df1e9e2..861413d33 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -411,24 +411,6 @@ body .fadeShow { color: black; } -.header-text { - font-size: 80px; - text-align: center; - color: #fff; - animation: pulse 1s ease-in-out infinite alternate; -} - -@keyframes pulse { - from { - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eef079, 0 0 20px #eef079, - 0 0 25px #eef079, 0 0 30px #eef079, 0 0 35px #eef079; - } - to { - text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #eef079, - 0 0 40px #eef079, 0 0 50px #eef079, 0 0 60px #eef079, 0 0 70px #eef079; - } -} - .app-container { height: 100vh; width: 100vw; @@ -438,27 +420,6 @@ body .fadeShow { } /* Page Containers */ -.landingpage-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-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; -} .errorpage-container { display: flex; @@ -529,148 +490,6 @@ body .fadeShow { flex-direction: row; } -.instructions-container { - width: 100%; - height: 80%; - display: flex; - flex-direction: row; -} -.instructions-container__section { - width: 60%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; -} -.instruction-bubble { - background-color: whitesmoke; - padding: 2em; - border-radius: 15px; - display: flex; - height: 45em; - width: 80%; - flex-direction: row; - margin: 1em; - overflow-y: scroll; - box-shadow: 0.25em 0.25em 0.25em black; - overflow-x: hidden; -} - -.instruction-arrow__container { - background-color: gold; - height: 3em; - width: 3em; - border-radius: 1.5em; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0.25em 0.25em 0.5em black; - margin: 0.5em; - cursor: pointer; -} - -.instruction-text__container { - width: 70%; - text-align: left; - height: 100%; -} - -.instruction-welcome { - font-size: 2.5em; - text-align: center; -} - -.instruction-header { - color: gold; - text-align: center; -} -.instruction-text { - text-align: left; - font-size: 1.5em; - text-align: center; -} - -.instruction-arrow__container:active { - box-shadow: 0em 0em 0em black; -} - -.instruction-arrow { - color: white; - font-size: 2em; - text-align: center; - font-weight: bold; -} -.instruction-arrow__placeholder { - margin: 0.5em; - width: 3em; -} - -.arrowbox { - display: flex; - flex-direction: row; - justify-content: flex-start; -} -.guide-container { - width: 35%; - flex-direction: column; - justify-content: center; -} - -.guide-img { - height: 30%; - border-style: solid; - border-color: chocolate; - box-shadow: 0.25em 0.5em 0.5em black; - margin-bottom: 0.5em; -} -.menu-container__section { - display: flex; - width: 30%; - height: 100%; - justify-content: flex-start; - align-items: center; -} - -.menu-container { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.menu-item { - width: 20em; - justify-content: center; - align-items: center; - text-align: center; - background-color: red; - color: white; - box-shadow: 0.25em 0.25em 0.5em black; -} - -.menu-item__text { - font-size: 3em; -} - -.menu-item :hover { - color: yellow; -} - -.menu-item:active { - box-shadow: 0em 0em 0em black; -} -.terms-section { - width: 100%; -} - -.terms-container { - display: flex; - text-align: center; - width: 100%; - flex-direction: column; -} - .login-form__container { width: 30%; min-width: 250px; @@ -796,239 +615,10 @@ body .fadeShow { } @media only screen and (max-width: 1224px) { - .instructions-container { - width: 100%; - height: 80%; - display: flex; - flex-direction: column; - } - .instructions-container__section { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - .main-container { - width: 100%; - background-color: gray; - opacity: 0.9; - border: darkgray; - border-width: 1em; - border-style: ridge; - border-radius: 15px; - display: flex; - flex-direction: column; - padding: 5px; - justify-content: space-between; - box-shadow: 0.25em 0.25em 0.25em black; - } - .terms-container { - display: flex; - align-items: center; - width: 100%; - flex-direction: column; - } - .menu-container__section { - width: 100%; - align-items: center; - justify-content: center; - } - .menu-container { - flex-direction: column; - justify-content: space-around; - } - .menu-item__text { - font-size: 2em; - } } @media only screen and (max-width: 950px) { - .instructions-container__section { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - .instruction-bubble { - background-color: whitesmoke; - padding: 1em; - border-radius: 15px; - display: flex; - flex-direction: column; - align-items: center; - margin: 1em; - overflow: scroll; - } - .guide-container { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - .guide-img { - height: auto; - width: 30%; - min-width: 112px; - border-style: solid; - border-color: chocolate; - box-shadow: 0.25em 0.5em 0.5em black; - margin-bottom: 0.5em; - } - .menu-container { - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } } @media only screen and (max-width: 600px) { - /* Landing Page */ - .landingpage-container { - padding: 2px 10px 2px 10px; - background-image: url("./assets/images/InexplicableTavern.png"); - background-size: cover; - height: 100%; - overflow: scroll; - } - - .main-container { - width: 80%; - height: 100%; - min-height: 80vh; - } - - .header-text { - font-size: 40px; - } - - .instructions-container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } - - .instructions-container__section { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - } - - .instruction-bubble { - height: 40vh; - width: 90%; - flex-direction: column; - align-items: flex-start; - overflow-x: hidden; - } - - .instruction-arrow__container { - background-color: gold; - height: 3em; - width: 3em; - border-radius: 1.5em; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0.25em 0.25em 0.5em black; - margin: 0.5em; - cursor: pointer; - } - - .instruction-text__container { - width: 100%; - } - - .instruction-welcome { - font-size: 1em; - } - - .instruction-header { - color: gold; - text-align: center; - font-size: 12px; - } - - .instruction-text { - text-align: left; - font-size: 0.5em; - text-align: center; - } - - .instruction-arrow__placeholder { - margin: 0.5em; - width: 3em; - } - - .arrowbox { - display: flex; - flex-direction: row; - width: 100%; - justify-content: center; - } - - .guide-container { - width: 85%; - flex-direction: row; - padding: 0.2em; - } - - .guide-img { - height: 6em; - border-style: solid; - border-color: chocolate; - box-shadow: 0.25em 0.25em 0.5em black; - margin-bottom: 0.5em; - margin-left: 2em; - } - .menu-container__section { - display: flex; - width: 100%; - align-items: center; - } - - .menu-container { - width: 80%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - .menu-item { - width: 10em; - justify-content: center; - align-items: center; - text-align: center; - background-color: red; - color: white; - border-radius: 15px; - box-shadow: 0.25em 0.25em 0.5em black; - } - - .menu-item__text { - font-size: 1em; - } - - .menu-item :hover { - color: yellow; - } - - .menu-item:active { - box-shadow: 0em 0em 0em black; - } - .terms-container { - display: flex; - text-align: center; - width: 100%; - flex-direction: column; - margin: 0; - } } From 7a3c4fc623b4e0fe943c8eb93a7708ab5a6aa9a7 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 22:12:51 -0400 Subject: [PATCH 4/8] restyled aboutpage --- .../landingapp/src/pages/AboutPage/index.js | 74 +++++++++---------- .../landingapp/src/pages/AboutPage/styles.css | 47 ++++++++++-- 2 files changed, 77 insertions(+), 44 deletions(-) diff --git a/deploy/web/landingapp/src/pages/AboutPage/index.js b/deploy/web/landingapp/src/pages/AboutPage/index.js index 841f53f2c..14e08384d 100644 --- a/deploy/web/landingapp/src/pages/AboutPage/index.js +++ b/deploy/web/landingapp/src/pages/AboutPage/index.js @@ -1,7 +1,7 @@ import React from "react"; import { Link, useHistory } from "react-router-dom"; -import "../../styles.css"; +import "./styles.css"; import Unicorn from "../../assets/images/unicorn.jpg"; @@ -9,47 +9,47 @@ const AboutPage = (props) => { let history = useHistory(); return (
-
+
history.goBack()}> Back
-

About LIGHT

-

- LIGHT is a research project focused on creating realistic interactive - AI. LIGHT stands for - “Learning in Interactive Games with Humans and Text.” - The LIGHT game is a direct application of - our research, 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. -

-

- 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. -

-

- 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. -

- +

About LIGHT

+
+

+ LIGHT is a research project focused on creating realistic + interactive AI. LIGHT stands for + “Learning in Interactive Games with Humans and Text.” + The LIGHT game is a direct application of + + {" "} + our research + + , 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. +

+

+ 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. +

+

+ 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. +

+
+
); diff --git a/deploy/web/landingapp/src/pages/AboutPage/styles.css b/deploy/web/landingapp/src/pages/AboutPage/styles.css index bd39a3ca3..ae7c861df 100644 --- a/deploy/web/landingapp/src/pages/AboutPage/styles.css +++ b/deploy/web/landingapp/src/pages/AboutPage/styles.css @@ -9,22 +9,40 @@ overflow: scroll; } -/* Component Containers*/ -.main-container { +.aboutpage-body { width: 100%; - background-color: gray; - opacity: 0.9; + background-color: rgba(105, 123, 77, 0.9); border: darkgray; border-width: 1em; border-style: ridge; border-radius: 15px; display: flex; flex-direction: column; - padding: 5px; + align-items: center; + padding: 3em; box-shadow: 0.25em 0.25em 0.25em black; } -/* Back Button */ +.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; @@ -56,11 +74,26 @@ display: flex; align-items: center; flex-direction: column; - padding: 1em 5em 4em 5em; + 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; } } From a031a3d575d66eec4bfce4f4b475f2f2e81e198b Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 22:26:15 -0400 Subject: [PATCH 5/8] restyled tutorialpage --- .../src/pages/TutorialPage/styles.css | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/deploy/web/landingapp/src/pages/TutorialPage/styles.css b/deploy/web/landingapp/src/pages/TutorialPage/styles.css index 08d738b6c..a0aabacda 100644 --- a/deploy/web/landingapp/src/pages/TutorialPage/styles.css +++ b/deploy/web/landingapp/src/pages/TutorialPage/styles.css @@ -98,3 +98,49 @@ animation: pulse 1s infinite; box-shadow: 0px 0px 0px black; } + +@media only screen and (max-width: 1224px) { +} + +@media only screen and (max-width: 950px) { +} + +@media only screen and (max-width: 600px) { + .tutorialpage-content { + background-color: white; + overflow-y: scroll; + overflow-x: hidden; + width: 100%; + height: 100%; + border-style: ridge; + border-color: darkgrey; + background-color: rgba(255, 255, 255, 0.95); + border-width: 0.5em; + padding: 3px; + margin: 0; + } + + .tutorial-header { + font-size: 1.35em; + text-align: center; + } + .tutorial-subheader { + font-size: 1em; + text-align: center; + } + .tutorial-text { + font-size: 0.9em; + } + .tutorialpage-image__row { + width: 100%; + } + .tutorialpage-image__half { + width: 100%; + } + .tutorialpage-image__75 { + width: 100%; + } + .tutorialpage-image__quarter { + width: 100%; + } +} From 51e275259c9c31650722d54219eb24f27822af18 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 23:01:54 -0400 Subject: [PATCH 6/8] restyled terms page --- .../landingapp/src/pages/TermsPage/index.js | 71 +++++++++---------- .../landingapp/src/pages/TermsPage/styles.css | 65 +++++++++++++++++ deploy/web/landingapp/src/styles.css | 11 --- 3 files changed, 98 insertions(+), 49 deletions(-) create mode 100644 deploy/web/landingapp/src/pages/TermsPage/styles.css diff --git a/deploy/web/landingapp/src/pages/TermsPage/index.js b/deploy/web/landingapp/src/pages/TermsPage/index.js index aba3b7e8f..2b1e6d488 100644 --- a/deploy/web/landingapp/src/pages/TermsPage/index.js +++ b/deploy/web/landingapp/src/pages/TermsPage/index.js @@ -1,54 +1,49 @@ import React from "react"; import { Link, useHistory } from "react-router-dom"; -import "../../styles.css"; +import "./styles.css"; const TermsPage = (props) => { let history = useHistory(); return (
-
+
history.goBack()}> Back
-

Terms

-

- Facebook will process the messages you send in playing the game in - accordance with our Data Policy ( - - facebook.com/policy - - ). Messages you send in playing the game may be used by Facebook for - research purposes and as otherwise specified in our Data Policy, and - may be used by and/or shared with third parties in connection with - this research. -

-

- This may involve public disclosure of the messages as part of a - research paper or data set. We will take measures to remove any - information that directly identifies you before doing so, but cannot - guarantee that messages will be completely anonymous. Do not send - personal information (for example, name, address, email, or phone - number) in your messages. -

-

- Facebook's Community Standards apply and you may not use any racist, - sexist, or otherwise offensive language, or harass other players. If - you violate our policies you may be reported and blocked. -

+

Terms

+
+

+ Facebook will process the messages you send in playing the game in + accordance with our Data Policy ( + + facebook.com/policy + + ). Messages you send in playing the game may be used by Facebook for + research purposes and as otherwise specified in our Data Policy, and + may be used by and/or shared with third parties in connection with + this research. +

+

+ This may involve public disclosure of the messages as part of a + research paper or data set. We will take measures to remove any + information that directly identifies you before doing so, but cannot + guarantee that messages will be completely anonymous. Do not send + personal information (for example, name, address, email, or phone + number) in your messages. +

+

+ Facebook's Community Standards apply and you may not use any racist, + sexist, or otherwise offensive language, or harass other players. If + you violate our policies you may be reported and blocked. +

+
); diff --git a/deploy/web/landingapp/src/pages/TermsPage/styles.css b/deploy/web/landingapp/src/pages/TermsPage/styles.css new file mode 100644 index 000000000..d7abbadbf --- /dev/null +++ b/deploy/web/landingapp/src/pages/TermsPage/styles.css @@ -0,0 +1,65 @@ +.termspage-container { + display: flex; + flex-direction: column; + padding: 1em 5em 4em 5em; + background-image: url("../../assets/images/deer.png"); + background-size: cover; + background-color: rgb(37, 58, 32, 0.7); + height: 100%; + overflow: scroll; + width: 100%; +} +.termspage-body { + width: 80%; + 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; + background-color: rgb(37, 58, 32, 0.9); + align-items: center; + height: 90%; + padding: 3em; +} + +.termspage-header { + color: white; +} + +.termspage-text__container { + color: white; +} + +@media only screen and (max-width: 1224px) { +} + +@media only screen and (max-width: 950px) { +} + +@media only screen and (max-width: 600px) { + .termspage-container { + padding: 0; + margin: 0; + height: 100vh; + width: 100vw; + background-size: contain; + background-repeat: no-repeat; + } + .termspage-body { + width: 90%; + height: 100%; + border: darkgray; + border-width: 0.7em; + background-color: rgb(37, 58, 32, 0.7); + padding: 0; + margin: 0; + overflow-y: scroll; + } + .termspage-text__container { + padding-left: 3px; + } +} diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index 861413d33..e6de7b98c 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -460,17 +460,6 @@ body .fadeShow { height: 100%; } -.termspage-container { - display: flex; - align-items: center; - flex-direction: column; - padding: 1em 5em 4em 5em; - background-image: url("./assets/images/deer.png"); - background-size: cover; - height: 100%; - overflow: scroll; -} - /* Component Containers*/ .main-container { width: 100%; From ad55310ee19dab8505fee99f17880df032c5c472 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 23:13:36 -0400 Subject: [PATCH 7/8] restyled login page --- .../landingapp/src/pages/LoginPage/index.js | 2 +- .../landingapp/src/pages/LoginPage/styles.css | 93 +++++++++++++++++++ deploy/web/landingapp/src/styles.css | 66 ------------- 3 files changed, 94 insertions(+), 67 deletions(-) create mode 100644 deploy/web/landingapp/src/pages/LoginPage/styles.css diff --git a/deploy/web/landingapp/src/pages/LoginPage/index.js b/deploy/web/landingapp/src/pages/LoginPage/index.js index a7453a5d8..a6647f0a0 100644 --- a/deploy/web/landingapp/src/pages/LoginPage/index.js +++ b/deploy/web/landingapp/src/pages/LoginPage/index.js @@ -1,6 +1,6 @@ import React from "react"; -import "../../styles.css"; +import "./styles.css"; const LoginPage = (props) => { return ( diff --git a/deploy/web/landingapp/src/pages/LoginPage/styles.css b/deploy/web/landingapp/src/pages/LoginPage/styles.css new file mode 100644 index 000000000..ba5d7bbc3 --- /dev/null +++ b/deploy/web/landingapp/src/pages/LoginPage/styles.css @@ -0,0 +1,93 @@ +.loginpage-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + padding: 1em 5em 4em 0.5em; + background-image: url("../../assets/images/InexplicableTavern.png"); + background-size: cover; + height: 100%; +} + +.login-form__container { + width: 50%; + min-width: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #cfb47d; + border-color: #9d733d; + border-style: ridge; + border-width: 1em; + padding: 1em; + color: white; +} + +.login-form__field { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + width: 100%; +} + +.login-form__label { + font-family: fantasy; + font-weight: bold; + font-size: 1.3em; + margin-right: 10px; +} + +.login-form__input { + font-size: 1rem; + font-family: fantasy; + font-weight: bold; + border: none; + background: transparent; + border-bottom: 1px solid #fff; + outline: none; + color: white; +} + +.login-form__submit { + padding: 5px 15px; + font-family: fantasy; + font-weight: bold; + background: white; + border-radius: 15px; + border: 0 none; + cursor: pointer; + box-shadow: 0.25em 0.2em 0.2em black; +} + +.login-form__submit:active { + box-shadow: 0em 0em 0em black; +} + +@media only screen and (max-width: 1224px) { +} + +@media only screen and (max-width: 950px) { +} + +@media only screen and (max-width: 600px) { + .loginpage-container { + padding: 0; + margin: 0; + } + .login-form__container { + width: 30%; + min-width: 250px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #cfb47d; + border-color: #9d733d; + border-style: ridge; + border-width: 1em; + padding: 1em; + color: white; + } +} diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index e6de7b98c..aed2bf60a 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -431,16 +431,6 @@ body .fadeShow { height: 100%; } -.loginpage-container { - display: flex; - justify-content: center; - flex-direction: column; - padding: 1em 5em 4em 0.5em; - background-image: url("./assets/images/InexplicableTavern.png"); - background-size: cover; - height: 100%; -} - .logoutpage-container { display: flex; @@ -479,62 +469,6 @@ body .fadeShow { flex-direction: row; } -.login-form__container { - width: 30%; - min-width: 250px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #cfb47d; - border-color: #9d733d; - border-style: ridge; - border-width: 1em; - padding: 1em; - color: white; -} - -.login-form__field { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - width: 100%; -} - -.login-form__label { - font-family: fantasy; - font-weight: bold; - font-size: 1.3em; - margin-right: 10px; -} - -.login-form__input { - font-size: 1rem; - font-family: fantasy; - font-weight: bold; - border: none; - background: transparent; - border-bottom: 1px solid #fff; - outline: none; - color: white; -} - -.login-form__submit { - padding: 5px 15px; - font-family: fantasy; - font-weight: bold; - background: white; - border-radius: 15px; - border: 0 none; - cursor: pointer; - box-shadow: 0.25em 0.2em 0.2em black; -} - -.login-form__submit:active { - box-shadow: 0em 0em 0em black; -} - .nameplate-container { display: flex; align-items: center; From 75661bef6eec6bb8e73c941cf4296243f306b7c1 Mon Sep 17 00:00:00 2001 From: Justin Pinero Date: Tue, 11 May 2021 23:59:16 -0400 Subject: [PATCH 8/8] restyled error page and logout page --- .../landingapp/src/pages/ErrorPage/index.js | 23 +++---- .../landingapp/src/pages/ErrorPage/styles.css | 60 +++++++++++++++++++ .../landingapp/src/pages/LogoutPage/index.js | 10 ++-- .../src/pages/LogoutPage/styles.css | 48 +++++++++++++++ deploy/web/landingapp/src/styles.css | 10 ---- 5 files changed, 122 insertions(+), 29 deletions(-) create mode 100644 deploy/web/landingapp/src/pages/ErrorPage/styles.css create mode 100644 deploy/web/landingapp/src/pages/LogoutPage/styles.css diff --git a/deploy/web/landingapp/src/pages/ErrorPage/index.js b/deploy/web/landingapp/src/pages/ErrorPage/index.js index b0e6411df..8768cd3fc 100644 --- a/deploy/web/landingapp/src/pages/ErrorPage/index.js +++ b/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 (
-
-
+
+
Return Home diff --git a/deploy/web/landingapp/src/pages/ErrorPage/styles.css b/deploy/web/landingapp/src/pages/ErrorPage/styles.css new file mode 100644 index 000000000..5b75435e2 --- /dev/null +++ b/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; + } +} diff --git a/deploy/web/landingapp/src/pages/LogoutPage/index.js b/deploy/web/landingapp/src/pages/LogoutPage/index.js index 8cfb418ea..97d85f3d9 100644 --- a/deploy/web/landingapp/src/pages/LogoutPage/index.js +++ b/deploy/web/landingapp/src/pages/LogoutPage/index.js @@ -1,17 +1,17 @@ import React from "react"; import { Link } from "react-router-dom"; -import "../../styles.css"; +import "./styles.css"; const LogoutPage = (props) => { return (
-
- - Back +
+ + Back to Home
-

+

You are now logged out. Thank you for playing!

diff --git a/deploy/web/landingapp/src/pages/LogoutPage/styles.css b/deploy/web/landingapp/src/pages/LogoutPage/styles.css new file mode 100644 index 000000000..fdb76f321 --- /dev/null +++ b/deploy/web/landingapp/src/pages/LogoutPage/styles.css @@ -0,0 +1,48 @@ +.logoutpage-container { + display: flex; + align-items: center; + flex-direction: column; + padding: 1em 5em 4em 0.5em; + background-image: url("../../assets/images/Squirrel.png"); + background-size: cover; + height: 100%; + width: 100%; + background-color: rgba(20, 67, 13, 1); +} + +.logoutpage-body { + width: 100%; + color: white; + justify-content: flex-start; +} + +.logoutpage-link { + text-decoration: none; + color: yellow; + margin-left: 2em; +} + +.logoutpage-text { + color: white; + text-align: center; +} + +@media only screen and (max-width: 1224px) { +} + +@media only screen and (max-width: 950px) { +} + +@media only screen and (max-width: 600px) { + .logoutpage-container { + padding: 0; + background-image: url("../../assets/images/Squirrel.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .logoutpage-body { + padding: 0; + } +} diff --git a/deploy/web/landingapp/src/styles.css b/deploy/web/landingapp/src/styles.css index aed2bf60a..a66777bad 100755 --- a/deploy/web/landingapp/src/styles.css +++ b/deploy/web/landingapp/src/styles.css @@ -431,16 +431,6 @@ body .fadeShow { height: 100%; } -.logoutpage-container { - display: flex; - - flex-direction: column; - padding: 1em 5em 4em 0.5em; - background-image: url("./assets/images/Squirrel.png"); - background-size: cover; - height: 100%; -} - .profilepage-container { display: flex; flex-direction: column;