From d339801aba3fcedc0b3027f73dac91deaae14acc Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 16 Apr 2021 18:58:58 -0400 Subject: Removed old testing react app for frontend. --- react-frontend/src/css/App.css | 76 ++++++++++++++++++++++++++ react-frontend/src/css/Canvas.css | 7 +++ react-frontend/src/css/CoordSelector.css | 52 ++++++++++++++++++ react-frontend/src/css/Route.css | 56 +++++++++++++++++++ react-frontend/src/css/UserCheckin.css | 94 ++++++++++++++++++++++++++++++++ 5 files changed, 285 insertions(+) create mode 100644 react-frontend/src/css/App.css create mode 100644 react-frontend/src/css/Canvas.css create mode 100644 react-frontend/src/css/CoordSelector.css create mode 100644 react-frontend/src/css/Route.css create mode 100644 react-frontend/src/css/UserCheckin.css (limited to 'react-frontend/src/css') diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css new file mode 100644 index 0000000..90e9046 --- /dev/null +++ b/react-frontend/src/css/App.css @@ -0,0 +1,76 @@ +.App { + display: grid; + grid-template-areas: "head canvasFill2 canvasFill3 checkin" + "canvasFill1 canvasFill2 canvasFill3 checkin" + "route canvasFill2 canvasFill3 checkin"; + grid-template-rows: max-content auto max-content; + grid-template-columns: max-content auto max-content max-content; + background-color: #121212; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + + +.Canvas-filler { + width: 100%; + height: 100%; + + z-index: 1; +} + +.Canvas-filler-1 { + grid-area: canvasFill1; +} +.Canvas-filler-2 { + grid-area: canvasFill2; +} +.Canvas-filler-3 { + grid-area: canvasFill3; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + grid-area: head; + min-height: 7vh; + width: max-content; + display: flex; + padding: 0 20px; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; + z-index: 10; + background-color: #333333; + border-radius: 5px; + margin: 5px; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.Loading { + z-index: 100; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/react-frontend/src/css/Canvas.css b/react-frontend/src/css/Canvas.css new file mode 100644 index 0000000..e67d87d --- /dev/null +++ b/react-frontend/src/css/Canvas.css @@ -0,0 +1,7 @@ +.Map-canvas { + /*touch-action: none; */ + position: absolute; + z-index: 5; + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/react-frontend/src/css/CoordSelector.css b/react-frontend/src/css/CoordSelector.css new file mode 100644 index 0000000..881be08 --- /dev/null +++ b/react-frontend/src/css/CoordSelector.css @@ -0,0 +1,52 @@ +/* CSS adapted from w3school buttons */ +.Btn-select-left > p, .Btn-select-right > p { + padding: 0; + margin: 0; +} + +.Btn-select-left { + background-color: #424242; + border: 4px solid pink; +} + +.Btn-select-left:hover { + box-shadow: 3px 3px #888888; + color: black; + background-color: pink; +} + +.Btn-select-right { + background-color: #424242; + border: 4px solid lightblue; +} + +.Btn-select-right:hover { + box-shadow: 3px 3px #888888; + color: black; + background-color: lightblue; +} + +.Btn:disabled, +.Btn[disabled]{ + border: 1px solid #999999; + background-color: #cccccc; + color: #666666; + box-shadow: none; + cursor: default; +} + +/* +.Btn:disabled:hover, +.Btn[disabled]:hover{ +} +*/ + +.Textbox { + width: 100px; +} + +.Number-input { + width: 90%; +} + + diff --git a/react-frontend/src/css/Route.css b/react-frontend/src/css/Route.css new file mode 100644 index 0000000..efc4868 --- /dev/null +++ b/react-frontend/src/css/Route.css @@ -0,0 +1,56 @@ +.Route { + grid-area: route; + z-index: 10; + color: white; + border-radius: 10px; + background-color: #121212; + /*cursor: default;*/ + /* Transparent background */ + background: rgba(0, 0, 0, 0); +} + +.Coord-selectors-flex { + display: flex; + gap: 20px; + padding: 8px; + margin: 0; + align-content: flex-end; + background-color: #333333; + margin: 5px; + border-radius: 3px; +} + +/* CSS adapted from w3school buttons */ +.Btn { + color: white; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + outline: none; +} + +.Route-btn:hover { + box-shadow: 3px 3px #ccc; + color: black; + background-color: lightgreen; +} + +.Route-btn { + background-color: #424242; + border: 2px solid lightgreen; + box-shadow: .5px .5px 0 2px lightgreen; +} + +.Btn:disabled, +.Btn[disabled]{ + border: 1px solid #999999; + background-color: #cccccc; + color: #666666; + /*cursor: default;*/ + box-shadow: none; +} \ No newline at end of file diff --git a/react-frontend/src/css/UserCheckin.css b/react-frontend/src/css/UserCheckin.css new file mode 100644 index 0000000..141cc01 --- /dev/null +++ b/react-frontend/src/css/UserCheckin.css @@ -0,0 +1,94 @@ +.User-checkin { + grid-area: checkin; + height: 100vh; + background-color: #121212; + z-index: 10; + color: white; + border-radius: 10px; + display: flex; + font-size: 18px; + cursor: default; + /* Transparent background */ + background: rgba(0, 0, 0, 0); +} + +ul { + list-style-type: none; +} + +.User-checkin > div { + z-index: 10; + background-color: #333333; + border-radius: 20px; + margin: 5px; +} + +.Coord-ex { + height: 1vh; + margin: 0; + padding: 0; + text-align: center; +} + +.Chosen-user > h2, .Checkins > h2 { + display: flex; + justify-content: space-evenly; + height: 5vh; + padding: 0 10px; +} + +.Checkin-list { + padding: 0 20px; + height: 86vh; + overflow-y: scroll; + cursor: default; +} + +.User-checkin-list { + height: 80vh; + overflow-y: scroll; + + list-style-position: inside; + padding: 0 20px; + text-align: center; + text-indent: -12px; +} + +.User-checkin-list > li { + margin-bottom: 20px; +} + + +.Checkin { + padding-top: 10px; + border-bottom: 1px solid #e6ecf0; +} + +.Checkin:last-child { + border-bottom: none; +} + +.Img-flex { + margin: 5px 10px 10px 0; + gap: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.Img-btn { + background-color: #424242; + border-radius: 50%; + margin-right: 10px; +} + +.Img-btn:hover { + box-shadow: 3px 3px #333333; + cursor: pointer; +} + +.Clickable-name { + cursor: pointer; + text-decoration: underline; + color: lightgreen; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From fc88d4d950e4cfad96102267d1ec7c0042ed78f2 Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sat, 17 Apr 2021 00:12:57 -0700 Subject: orientation completed --- react-frontend/src/App.js | 3 + react-frontend/src/components/HubList.js | 1 + react-frontend/src/components/Modal.js | 70 ++++++++++++++ react-frontend/src/components/landing.html | 10 ++ react-frontend/src/css/Modal.css | 146 +++++++++++++++++++++++++++++ 5 files changed, 230 insertions(+) create mode 100644 react-frontend/src/components/Modal.js create mode 100644 react-frontend/src/components/landing.html create mode 100644 react-frontend/src/css/Modal.css (limited to 'react-frontend/src/css') diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index 2eb0c81..fd7d648 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -4,6 +4,7 @@ import TimeSelector from './components/TimeSelector.js'; import Visualization from './components/Visualization.js'; import HubList from './components/HubList.js'; import Loading from './components/Loading.js'; +import Modal from './components/Modal.js'; // CSS import import './css/App.css'; @@ -50,6 +51,7 @@ function App() { setIsChanging(false); } + // Hooks to update data on init and switching of data useEffect(() => getGraphData(), []); useEffect(() => { @@ -61,6 +63,7 @@ function App() { <> {(!hasLoaded) ? :
+ PHP
Welcome to WatchDogs!
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index f5b1414..5736e89 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -39,6 +39,7 @@ function HubList(props) { setName(''); } + // React hook that updates when the hubs are recalculated useEffect(() => updateHubItems(), [props.data]); diff --git a/react-frontend/src/components/Modal.js b/react-frontend/src/components/Modal.js new file mode 100644 index 0000000..3ce5d39 --- /dev/null +++ b/react-frontend/src/components/Modal.js @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; + +import '../css/Modal.css'; + + +function Modal() { + + const [count, setCount] = useState(0); + + const nextModal1 = () => { + setCount(1); + } + const nextModal2 = () => { + setCount(2); + } + const nextModal3 = () => { + setCount(3); + } + const nextModal4 = () => { + setCount(4); + } + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setCount(0); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + } + + + return ( +
+
+ {(count == 0) &&

+

Welcome to WatchDogs!

+

Click start for an introduction to the WatchDogs interface.

+

+

+

} + {(count == 1) &&

+

+ This is the suspicion ranking pane, which displays + high-profile traders and the suspicion score our algorithm assigned + to them. The higher an individual is ranked, the more likely they are involved in insider trading. +

+

} + {(count == 2) &&

+

+ The Timeframe pane + allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will + be calculated based on the trades that occured during the timeframe you select. +

+

+

} + {count == 3 &&

+

+ The Trader Graph + shows how traders are related. Click on a name in the graph to see more information about that individual. +

+

} + {count == 4 &&

+ +

} +
+ +
+ ); +} + +export default Modal; \ No newline at end of file diff --git a/react-frontend/src/components/landing.html b/react-frontend/src/components/landing.html new file mode 100644 index 0000000..8b33b5c --- /dev/null +++ b/react-frontend/src/components/landing.html @@ -0,0 +1,10 @@ + + + + + WatchDogLanding + + +

Hello welcome to watchdog

+ + diff --git a/react-frontend/src/css/Modal.css b/react-frontend/src/css/Modal.css new file mode 100644 index 0000000..7ee5045 --- /dev/null +++ b/react-frontend/src/css/Modal.css @@ -0,0 +1,146 @@ +.modal { + background-color: aqua; + display: block; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 100; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgba(0, 0, 0, 0.8); + color: white; +} + +.m{ + border: 7px solid rgb(7, 94, 12); + border-radius: 5px; + background-color: white; + color: black; + position: fixed; + height: fit-content; + width: 20vw; + padding: .5%; +} + +.modal0{ + top: 30vh; + left: 40vw; +} +.modal1{ + top: 7vh; + right: 29vw; +} +@media (max-width: 750px) { + .modal1{ + top: 7vh; + right: 0vw; + } +} +.modal2{ + bottom: 20vh; + left: 5vw; +} +.modal3{ + top: 35vh; + left: 45vw; +} +.modal4{ + top: 30vh; + left: 37vw; + padding: 2%; +} + +.restart-modal:after{ + z-index: 101; + border: 7px solid rgb(7, 94, 12); + border-radius: 15px; + background-color: white; + color: black; + position: fixed; + height: 25px; + width: 30px; + bottom: 30px; + right: 3vw; + content:'?'; +} +.restart-modal:hover:after{ + content:'Restart Orientation'; + width: 150px; +} + +span { + font-weight: bold; + color:rgba(10, 9, 71); +} + +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + } + + .right { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + + .left { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); + } + + .up { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + } + + .down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + } + + .align-right{ + text-align: right; + margin-right: 15px; + } + + .align-center{ + text-align: center; + } + + .align-left{ + text-align: left; + margin-left: 15px; + } + + .next{ + background-color: rgb(206, 206, 206); + color: black; + border: 2px solid rgba(10, 9, 71); + border-radius: 5px; + padding: 5px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + } + + .next:hover { + background-color: rgb(7, 94, 12); + color: white; + } + + .skip{ + background-color: white; + border: none; + color:rgb(119, 119, 119); + } + + .skip:hover{ + color: black; + } + + -- cgit v1.2.3-70-g09d2 From c1bcc55be1ada49e63a7cfd49c36695019e36658 Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sat, 17 Apr 2021 01:59:47 -0700 Subject: sidebar contrast bug fixed, landing page started --- landing.html | 83 ++++++++++++ react-frontend/src/components/Modal.js | 8 +- react-frontend/src/components/landing.html | 10 -- react-frontend/src/css/Landing.css | 202 +++++++++++++++++++++++++++++ react-frontend/src/css/Modal.css | 2 +- 5 files changed, 290 insertions(+), 15 deletions(-) create mode 100644 landing.html delete mode 100644 react-frontend/src/components/landing.html create mode 100644 react-frontend/src/css/Landing.css (limited to 'react-frontend/src/css') diff --git a/landing.html b/landing.html new file mode 100644 index 0000000..80bb9dc --- /dev/null +++ b/landing.html @@ -0,0 +1,83 @@ + + + + + WatchDogLanding + + + +
+
+ About + Contact + News + Home +
+
+
+ +
Hello welcome to watchdog + +
+ +
pic preview
+ +
+

Our App

+

subtitle

+

who we are; our inspiration; purpose of our app: who for, what it's not

+
our data
+
our algorithm
+
+ +
+
+
+

Meet the Team

+

subtext

+ +
+
+
+ +
+

Clark

+

subtxt

+
+ +
+
+ +
+

Julia

+

subtxt

+
+ +
+
+ +
+

Michael

+

subtxt

+
+ +
+
+ +
+

Reagan

+

subtxt

+
+
+
+
+
+
+ +
+
Disclaimer
+
Other
+
+ + + diff --git a/react-frontend/src/components/Modal.js b/react-frontend/src/components/Modal.js index 3ce5d39..ad69650 100644 --- a/react-frontend/src/components/Modal.js +++ b/react-frontend/src/components/Modal.js @@ -32,21 +32,21 @@ function Modal() {
{(count == 0) &&

-

Welcome to WatchDogs!

+

Welcome to WatchDogs!

Click start for an introduction to the WatchDogs interface.

} {(count == 1) &&

- This is the suspicion ranking pane, which displays + This is the suspicion ranking pane, which displays high-profile traders and the suspicion score our algorithm assigned to them. The higher an individual is ranked, the more likely they are involved in insider trading.

} {(count == 2) &&

- The Timeframe pane + The Timeframe pane allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will be calculated based on the trades that occured during the timeframe you select.

@@ -54,7 +54,7 @@ function Modal() {

} {count == 3 &&

- The Trader Graph + The Trader Graph shows how traders are related. Click on a name in the graph to see more information about that individual.

} diff --git a/react-frontend/src/components/landing.html b/react-frontend/src/components/landing.html deleted file mode 100644 index 8b33b5c..0000000 --- a/react-frontend/src/components/landing.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - WatchDogLanding - - -

Hello welcome to watchdog

- - diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css new file mode 100644 index 0000000..5a39bfe --- /dev/null +++ b/react-frontend/src/css/Landing.css @@ -0,0 +1,202 @@ +.nav-bar{ + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: 70px; + background-color: rgb(7, 7, 44); + z-index: 100; +} + +.topnav { + background-color: rgb(7, 7, 44); + overflow: hidden; + margin-right: 30px; +} + +.topnav a { + float: right; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + height: 30px; + padding-top: 25px; +} + +.topnav a:hover { + background-color: rgb(17, 11, 99); + color: white; +} + +.topnav a.active { + background-color: #4CAF50; + color: white; +} + +body { + background-color: #f3f3f3; + font-family:Verdana, Geneva, Tahoma, sans-serif; + overflow-y: scroll; + overflow-x: hidden; + position: relative; + left: 0px; + +} +main { + margin-top: 65px; + display: flex; + flex-direction: column; + position: relative; + left: 0px; +} + +.intro { + height: 120vh; + width: 100vw; + background-color: rgb(3, 2, 24); + color: white; + +} + +.app-preview { + height: 90vh; + width: 100vw; + background-color: #b7ffb9; + color: white; +} + +section { + width: 100vw; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#app-intro{ + padding-top: 160px; +} + +.s-i { + width: 100%; + max-width: 1600px; + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding-top: 0px; +} + +.s-i-p { + display: flex; + flex-direction: column; + justify-content: center; +} + +.s-i-p-heading{ + font-size: 45px; + margin: 10px 0 0 0; + text-align: center; + font-weight: bold; +} + +.s-i-p-text{ + color: rgba(0,0,0, 0.6); + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + max-width: 700px; + margin: 10px 0 20px 0; +} + +.s2-i-s { + padding-top: 0px; + width: 80%; + max-width: 1600px; + min-height: 500px; + align-items: center; +} + +#team { + width: 100vw; + padding: 50px 0 200px 0; + justify-content: flex-start; + background-color: #cccccc; +} + +#s-i-p-heading-team{ + margin-bottom: 0px; +} + +#s-i-p-heading-text { + color: rgba(0,0,0, 1); + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 100%; + margin: 0; +} + +#s3-i-t-p { + flex-direction: column; + max-width: 1000px; + max-height: 500px; + height: 500px; +} + +#s-i-p-team-c{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; +} + +.s-i-p-team-person-c{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 50px; +} + +.s-i-p-team-person{ + border-radius: 100px; + overflow: hidden; + margin: 20px; + height: 200px; + width: 200px; + box-shadow: 0 0 2px 2px rgba(0,0,0,0.15); +} + +.s-i-p-team-text{ + color: rgba(0,0,0, 1); + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + max-width: 700px; + margin: 0; +} + +#footer { + width: 100vw; + background: rgb(7, 7, 44); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + +.footer-item{ + color: white; + font-size: 20px; +} + diff --git a/react-frontend/src/css/Modal.css b/react-frontend/src/css/Modal.css index 7ee5045..96f9066 100644 --- a/react-frontend/src/css/Modal.css +++ b/react-frontend/src/css/Modal.css @@ -70,7 +70,7 @@ width: 150px; } -span { +.span { font-weight: bold; color:rgba(10, 9, 71); } -- cgit v1.2.3-70-g09d2 From cdcf7602c5fd2066f69fdbe64562e2faca915422 Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sat, 17 Apr 2021 02:37:15 -0700 Subject: some landing page improvements, css cleaned --- landing.html | 55 +++++++++++++--------------- react-frontend/src/css/Landing.css | 69 ++++++++++++++++------------------- react-frontend/src/images/reagan.png | Bin 0 -> 2150995 bytes 3 files changed, 56 insertions(+), 68 deletions(-) create mode 100644 react-frontend/src/images/reagan.png (limited to 'react-frontend/src/css') diff --git a/landing.html b/landing.html index 80bb9dc..c87d582 100644 --- a/landing.html +++ b/landing.html @@ -7,13 +7,13 @@
-
- About - Contact - News - Home +
+ About + Contact + News + Home +
-
Hello welcome to watchdog @@ -23,50 +23,45 @@
pic preview
-

Our App

-

subtitle

+

Our App

+

subtitle

who we are; our inspiration; purpose of our app: who for, what it's not

our data
our algorithm
-
-
-

Meet the Team

-

subtext

+
+
+

Meet the Team

-
-
-
+
+
+
-

Clark

-

subtxt

+

Clark

-
-
+
+
-

Julia

-

subtxt

+

Julia

-
-
+
+
-

Michael

-

subtxt

+

Michael

-
-
- +
+
+
-

Reagan

-

subtxt

+

Reagan Hunt

diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css index 5a39bfe..e6841f8 100644 --- a/react-frontend/src/css/Landing.css +++ b/react-frontend/src/css/Landing.css @@ -40,31 +40,34 @@ body { font-family:Verdana, Geneva, Tahoma, sans-serif; overflow-y: scroll; overflow-x: hidden; - position: relative; - left: 0px; - + display: flex; + flex-direction: column; + width: 80vw; } main { margin-top: 65px; display: flex; flex-direction: column; - position: relative; - left: 0px; } .intro { - height: 120vh; + height: 1000px; width: 100vw; background-color: rgb(3, 2, 24); - color: white; - + color: white; + position: relative; + left: -10px; } .app-preview { - height: 90vh; + height: 1000px; width: 100vw; background-color: #b7ffb9; color: white; + position: relative; + left: 0px; + position: relative; + left: -10px; } section { @@ -74,35 +77,39 @@ section { flex-direction: column; justify-content: center; align-items: center; + } #app-intro{ padding-top: 160px; } -.s-i { +.team { width: 100%; max-width: 1600px; display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 0px; + width: 80%; + min-height: 500px; + align-items: center; } -.s-i-p { +.center { display: flex; flex-direction: column; justify-content: center; } -.s-i-p-heading{ +.heading{ font-size: 45px; margin: 10px 0 0 0; text-align: center; font-weight: bold; } -.s-i-p-text{ +.text{ color: rgba(0,0,0, 0.6); font-size: 18px; display: flex; @@ -113,44 +120,27 @@ section { margin: 10px 0 20px 0; } -.s2-i-s { - padding-top: 0px; - width: 80%; - max-width: 1600px; - min-height: 500px; - align-items: center; -} - #team { width: 100vw; padding: 50px 0 200px 0; justify-content: flex-start; background-color: #cccccc; + position: relative; + left: -10px; } -#s-i-p-heading-team{ +#team-heading{ margin-bottom: 0px; } -#s-i-p-heading-text { - color: rgba(0,0,0, 1); - font-size: 18px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - width: 100%; - margin: 0; -} - -#s3-i-t-p { +#team-holder { flex-direction: column; max-width: 1000px; max-height: 500px; height: 500px; } -#s-i-p-team-c{ +#people-holder{ display: flex; flex-direction: row; justify-content: center; @@ -158,7 +148,7 @@ section { width: 100%; } -.s-i-p-team-person-c{ +.team-person-holder{ display: flex; flex-direction: column; justify-content: center; @@ -166,7 +156,7 @@ section { margin-top: 50px; } -.s-i-p-team-person{ +.team-person{ border-radius: 100px; overflow: hidden; margin: 20px; @@ -175,7 +165,7 @@ section { box-shadow: 0 0 2px 2px rgba(0,0,0,0.15); } -.s-i-p-team-text{ +.team-text{ color: rgba(0,0,0, 1); font-size: 18px; display: flex; @@ -193,6 +183,8 @@ section { flex-direction: column; justify-content: center; align-items: center; + position: relative; + left: -10px; } .footer-item{ @@ -200,3 +192,4 @@ section { font-size: 20px; } + diff --git a/react-frontend/src/images/reagan.png b/react-frontend/src/images/reagan.png new file mode 100644 index 0000000..15c02f0 Binary files /dev/null and b/react-frontend/src/images/reagan.png differ -- cgit v1.2.3-70-g09d2 From 860ba5b0e34ecdd27d2ec081191ab5bf9b32524b Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sat, 17 Apr 2021 16:41:56 -0700 Subject: landing page nav bar done --- landing.html | 18 ++++++---- react-frontend/src/App.js | 4 ++- react-frontend/src/components/TimeSelector.js | 2 +- react-frontend/src/components/images/logo.png | Bin 0 -> 43282 bytes react-frontend/src/components/images/mainlogo.png | Bin 0 -> 269065 bytes react-frontend/src/css/App.css | 13 ++++++-- react-frontend/src/css/Landing.css | 39 ++++++++++++++++++++-- react-frontend/src/images/previewwatchdog.png | Bin 0 -> 321433 bytes 8 files changed, 63 insertions(+), 13 deletions(-) create mode 100644 react-frontend/src/components/images/logo.png create mode 100644 react-frontend/src/components/images/mainlogo.png create mode 100644 react-frontend/src/images/previewwatchdog.png (limited to 'react-frontend/src/css') diff --git a/landing.html b/landing.html index c87d582..47ca60e 100644 --- a/landing.html +++ b/landing.html @@ -8,19 +8,23 @@
- About - Contact - News - Home + Team + About + Home
+
-
Hello welcome to watchdog - +
+ logo +
-
pic preview
+
+ + preview +

Our App

diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index fd7d648..34632eb 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -5,6 +5,7 @@ import Visualization from './components/Visualization.js'; import HubList from './components/HubList.js'; import Loading from './components/Loading.js'; import Modal from './components/Modal.js'; +import logo from './components/images/logo.png'; // CSS import import './css/App.css'; @@ -64,7 +65,8 @@ function App() { {(!hasLoaded) ? :
PHP -
Welcome to WatchDogs!
+
+
diff --git a/react-frontend/src/components/TimeSelector.js b/react-frontend/src/components/TimeSelector.js index 6960807..652a9ec 100644 --- a/react-frontend/src/components/TimeSelector.js +++ b/react-frontend/src/components/TimeSelector.js @@ -34,7 +34,7 @@ function TimeSelector(props) {
-

Adjust Timeframe :)

+

Adjust Timeframe

diff --git a/react-frontend/src/components/images/logo.png b/react-frontend/src/components/images/logo.png new file mode 100644 index 0000000..7e4e9ee Binary files /dev/null and b/react-frontend/src/components/images/logo.png differ diff --git a/react-frontend/src/components/images/mainlogo.png b/react-frontend/src/components/images/mainlogo.png new file mode 100644 index 0000000..a26df0f Binary files /dev/null and b/react-frontend/src/components/images/mainlogo.png differ diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css index 90e9046..f632a7f 100644 --- a/react-frontend/src/css/App.css +++ b/react-frontend/src/css/App.css @@ -49,9 +49,14 @@ font-size: calc(10px + 2vmin); color: white; z-index: 10; - background-color: #333333; - border-radius: 5px; margin: 5px; + +} + +#in-app-logo-holder { + border: 7px solid rgb(7, 94, 12); + border-radius: 5px; + background-color: white; } .App-link { @@ -73,4 +78,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); +} + +#in-app-logo { + width: 200px; } \ No newline at end of file diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css index e6841f8..0a5a845 100644 --- a/react-frontend/src/css/Landing.css +++ b/react-frontend/src/css/Landing.css @@ -1,3 +1,7 @@ +html { + scroll-behavior: smooth; + } + .nav-bar{ position: fixed; top: 0px; @@ -43,6 +47,7 @@ body { display: flex; flex-direction: column; width: 80vw; + scroll-behavior: smooth slow; } main { margin-top: 65px; @@ -51,7 +56,7 @@ main { } .intro { - height: 1000px; + height: 900px; width: 100vw; background-color: rgb(3, 2, 24); color: white; @@ -59,8 +64,27 @@ main { left: -10px; } +#enter-watchdogs { + background-color: rgb(206, 206, 206); + color: rgba(10, 9, 71); + border: 2px solid rgb(255, 255, 255); + border-radius: 5px; + padding: 5px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + height: 70px; + width: 200px; + font-weight: bold; + font-family:sans-serif; +} +#enter-watchdogs:hover { + background-color: #94ff73; + } + .app-preview { - height: 1000px; + height: 900px; width: 100vw; background-color: #b7ffb9; color: white; @@ -70,6 +94,17 @@ main { left: -10px; } +#preview { + width: 70vw; + border: 10px solid rgb(255, 255, 255); + border-radius: 5px; +} + +#preview-text { + color:#868686; + font-size: small; +} + section { width: 100vw; overflow: hidden; diff --git a/react-frontend/src/images/previewwatchdog.png b/react-frontend/src/images/previewwatchdog.png new file mode 100644 index 0000000..56669d8 Binary files /dev/null and b/react-frontend/src/images/previewwatchdog.png differ -- cgit v1.2.3-70-g09d2 From 0eff49053d862dfbc0fa1d1ed6587517b0526e04 Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sat, 17 Apr 2021 18:18:08 -0700 Subject: landing preview/disclaimer added --- landing.html | 26 +++++++++++++++++++++----- react-frontend/src/css/Landing.css | 14 ++++++++++++++ 2 files changed, 35 insertions(+), 5 deletions(-) (limited to 'react-frontend/src/css') diff --git a/landing.html b/landing.html index 47ca60e..d97c2ba 100644 --- a/landing.html +++ b/landing.html @@ -28,10 +28,16 @@

Our App

-

subtitle

-

who we are; our inspiration; purpose of our app: who for, what it's not

-
our data
-
our algorithm
+

+

Inspiration

+
who we are; our inspi
+

+

The Data

+
who we are; our inspi
+

+

The Algorithm

+
who we are; our inspiration; purpose of our app: who for, what it's not
+

@@ -74,8 +80,18 @@
+

Disclaimer
-
Other
+

+
Suspicion ranks returned by WatchDogs’ + algorithm DO NOT prove--or even suggest--that an individual has + engaged in insider trading. WatchDogs suspicion ranks should not + be interpreted as indication of an individual’s participation in + illegal activity. WatchDogs data, including suspicion ranks, cannot + be used as evidence in legal proceedings. Please use WatchDogs as + it is intended, and use discretion when interpreting algorithmic results. +
+

diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css index 0a5a845..c2bc567 100644 --- a/react-frontend/src/css/Landing.css +++ b/react-frontend/src/css/Landing.css @@ -117,6 +117,8 @@ section { #app-intro{ padding-top: 160px; + height: fit-content; + width: 100vw; } .team { @@ -220,11 +222,23 @@ section { align-items: center; position: relative; left: -10px; + height: fit-content; + width: 100vw; } .footer-item{ color: white; font-size: 20px; } +.footer-subtext{ + color: white; + font-size: 15px; + width: 80vw; +} + +.appinfotxt { + font-size: 15px; + color:rgb(3, 2, 24); +} -- cgit v1.2.3-70-g09d2 From f0866fc8c35b2124d1690ff83fc6a55c3e720eda Mon Sep 17 00:00:00 2001 From: 9308233900 Date: Sun, 18 Apr 2021 15:23:36 -0700 Subject: landing page rough draft completed --- react-frontend/src/App.js | 226 +++++++++------ react-frontend/src/components/WatchDogs.js | 89 ++++++ react-frontend/src/components/images/mainlogo.png | Bin 269065 -> 0 bytes react-frontend/src/css/App.css | 1 + react-frontend/src/css/Landing.css | 322 +++++++++++----------- react-frontend/src/images/mainlogo.png | Bin 0 -> 269065 bytes 6 files changed, 406 insertions(+), 232 deletions(-) create mode 100644 react-frontend/src/components/WatchDogs.js delete mode 100644 react-frontend/src/components/images/mainlogo.png create mode 100644 react-frontend/src/images/mainlogo.png (limited to 'react-frontend/src/css') diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index 0a6e6c1..a639edd 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -1,89 +1,161 @@ // React/component imports import React, {useEffect, useState} from 'react'; -import TimeSelector from './components/TimeSelector.js'; -import Visualization from './components/Visualization.js'; -import HubList from './components/HubList.js'; -import Loading from './components/Loading.js'; -import Modal from './components/Modal.js'; -import logo from './components/images/logo.png'; - -// CSS import -import './css/App.css'; - -/** - * Main component of the app. Holds the main layout of the big components. - * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page. - */ +import WatchDogs from './components/WatchDogs.js'; +import reagan from './images/reagan.png'; +import previewwatchdog from './images/previewwatchdog.png'; +import mainlogo from './images/mainlogo.png'; + + +import './css/Landing.css'; + function App() { - // State to open app when loaded - const [hasLoaded, setHasLoaded] = useState(false); - // State indicate if canvas is redrawing - const [isChanging, setIsChanging] = useState(false); - // State to hold dates -> two weeks apart on initialization. - const [dates, setDates] = useState({ - start: new Date(Date.now() - 12096e5), - end: new Date() - }); - // State for visualization data - const [data, setData] = useState([]); - // State for selected person - const [selected, setSelected] = useState(-1); - - const toEpochMilli = date => Date.parse(date); - const getGraphData = () => { - console.log({ - start: toEpochMilli(dates.start), - end: toEpochMilli(dates.end) - }); - fetch("http://localhost:4567/data", { - method: "POST", - body: JSON.stringify({ - start: toEpochMilli(dates.start), - end: toEpochMilli(dates.end) - }), - headers: { - "Content-Type": "application/json", - }, - credentials: "same-origin" - }) - .then(res => res.json()) - .then(data => { - //TODO: optimize this - const sliced = data.holders.slice(0, 500); - console.log(sliced); - setData(sliced); - setHasLoaded(true); - }) - .catch(err => console.log(err)); - - setIsChanging(false); - } - - - // Hooks to update data on init and switching of data - //useEffect(() => getGraphData(), []); - useEffect(() => { - setIsChanging(true); - getGraphData(); - }, [dates]); + const [startApp, setStartApp] = useState(false); + + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setStartApp(false); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + setStartApp(true); + } + return ( <> - {(!hasLoaded) ? : -
- PHP -
-
-
-
-
- - - + + {(!startApp) ? +
+
+
+ Team + About + Home +
+
+ +
+ +
+ logo + +
+ +
+ + preview +
+ +
+

About Our App

+

+

WatchDogs utilizes a simple, + interactive interface to provide you with the latest + data relating to high-profile investors’ trades. Directly from + the SEC, WatchDogs relays information regarding “inside” investors + and their recent trades, as well as provides computed values such + as an individual’s net profit from a stock at time of trade and a + ranking of individuals most likely recently involved in insider trading. + The computed “suspicion ranks” are determined using multiple factors + (including recent trade profitability and investor connectedness) + and a complex algorithm. For added convenience, YOU choose the + timeframe WatchDogs considers when analyzing trade data. WatchDogs + makes insider trade data accessible to the public, and provides + low-level intuition regarding which investors are more and less + likely to be committing unlawful insider trading.

+
It is important to remember that suspicion + ranks returned by WatchDogs’ algorithm DO NOT prove--or even suggest--that + an individual has engaged in insider trading. WatchDogs suspicion + ranks should not be interpreted as indication of an individual’s + participation in illegal activity. WatchDogs data, including suspicion ranks, + cannot be used as evidence in legal proceedings. Please use WatchDogs + as it is intended, and use discretion when interpreting algorithmic + results.
+

+

The Data

+
WatchDogs uses data retrieved from SEC.gov’s + EDGAR API. Trades analyzed by WatchDogs are of the type Form 4, + meaning the filing individual is an “insider” (e.g. the CEO) at + the company whose stock they are trading. In-app data relating + to investors, trades, and profitability is accessible to the public via + the SEC, and only public data is input to the SuspicionRank algorithm.
+

+

Our Algorithm

+
WatchDogs suspicion rank represents the likelihood + of an individual being involved in insider trading. The SuspicionRank algorithm, + a derivative of Lary Page’s PageRank algorithm, considers “insiders” who similarly + trade stocks (within a given timeframe) as “linked”, while simultaneously + considering involved individuals’ net profit on their stocks at the time + of trade. (Obviously, an “inside” investor who makes a counter-productive + trade is not likely to be insider trading.)
+

+
+ +
+
+
+

Meet the Team

+
+
+
+ +
+

Clark Oh-Willeke

+
+ +
+
+ +
+

Julia McCauley

+
+ +
+
+ +
+

Michael Foiani

+
+ +
+
+ +
+

Reagan Hunt

+
+
+
+
+
+
+ +
+

+
Disclaimer
+

+
Suspicion ranks returned by WatchDogs’ + algorithm DO NOT prove--or even suggest--that an individual has + engaged in insider trading. WatchDogs suspicion ranks should not + be interpreted as indication of an individual’s participation in + illegal activity. WatchDogs data, including suspicion ranks, cannot + be used as evidence in legal proceedings. Please use WatchDogs as + it is intended, and use discretion when interpreting algorithmic results. +
+

+
+ + : + } + ); } -export default App; + + + + + +export default App; \ No newline at end of file diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js new file mode 100644 index 0000000..d631ea9 --- /dev/null +++ b/react-frontend/src/components/WatchDogs.js @@ -0,0 +1,89 @@ +// React/component imports +import React, {useEffect, useState} from 'react'; +import TimeSelector from './TimeSelector.js'; +import Visualization from './Visualization.js'; +import HubList from './HubList.js'; +import Loading from './Loading.js'; +import Modal from './Modal.js'; +import logo from './images/logo.png'; + +// CSS import +import '../css/App.css'; + +/** + * Main component of the app. Holds the main layout of the big components. + * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page. + */ +function WatchDogs() { + // State to open app when loaded + const [hasLoaded, setHasLoaded] = useState(false); + // State indicate if canvas is redrawing + const [isChanging, setIsChanging] = useState(false); + // State to hold dates -> two weeks apart on initialization. + const [dates, setDates] = useState({ + start: new Date(Date.now() - 12096e5), + end: new Date() + }); + // State for visualization data + const [data, setData] = useState([]); + // State for selected person + const [selected, setSelected] = useState(-1); + + const toEpochMilli = date => Date.parse(date); + const getGraphData = () => { + console.log({ + start: toEpochMilli(dates.start), + end: toEpochMilli(dates.end) + }); + fetch("http://localhost:4567/data", { + method: "POST", + body: JSON.stringify({ + start: toEpochMilli(dates.start), + end: toEpochMilli(dates.end) + }), + headers: { + "Content-Type": "application/json", + }, + credentials: "same-origin" + }) + .then(res => res.json()) + .then(data => { + //TODO: optimize this + const sliced = data.holders.slice(0, 500); + console.log(sliced); + setData(sliced); + setHasLoaded(true); + }) + .catch(err => console.log(err)); + + setIsChanging(false); + } + + + // Hooks to update data on init and switching of data + //useEffect(() => getGraphData(), []); + useEffect(() => { + setIsChanging(true); + getGraphData(); + }, [dates]); + + return ( + <> + {(!hasLoaded) ? : +
+ PHP +
+
+
+
+
+ + + +
+ } + + ); +} + +export default WatchDogs; diff --git a/react-frontend/src/components/images/mainlogo.png b/react-frontend/src/components/images/mainlogo.png deleted file mode 100644 index a26df0f..0000000 Binary files a/react-frontend/src/components/images/mainlogo.png and /dev/null differ diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css index f632a7f..e39eb3e 100644 --- a/react-frontend/src/css/App.css +++ b/react-frontend/src/css/App.css @@ -6,6 +6,7 @@ grid-template-rows: max-content auto max-content; grid-template-columns: max-content auto max-content max-content; background-color: #121212; + } .App-logo { diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css index c2bc567..58658b0 100644 --- a/react-frontend/src/css/Landing.css +++ b/react-frontend/src/css/Landing.css @@ -1,244 +1,256 @@ html { - scroll-behavior: smooth; - } + scroll-behavior: smooth; + z-index: 1000; + +} .nav-bar{ - position: fixed; - top: 0px; - left: 0px; - width: 100vw; - height: 70px; - background-color: rgb(7, 7, 44); - z-index: 100; + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: 70px; + background-color: rgb(7, 7, 44); + z-index: 100; } .topnav { - background-color: rgb(7, 7, 44); - overflow: hidden; - margin-right: 30px; + background-color: rgb(7, 7, 44); + overflow: hidden; + margin-right: 30px; } .topnav a { - float: right; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; - height: 30px; - padding-top: 25px; + float: right; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + height: 30px; + padding-top: 25px; } .topnav a:hover { - background-color: rgb(17, 11, 99); - color: white; + background-color: rgb(17, 11, 99); + color: white; } .topnav a.active { - background-color: #4CAF50; - color: white; + background-color: #4CAF50; + color: white; } -body { - background-color: #f3f3f3; - font-family:Verdana, Geneva, Tahoma, sans-serif; - overflow-y: scroll; - overflow-x: hidden; - display: flex; - flex-direction: column; - width: 80vw; - scroll-behavior: smooth slow; +.body { + background-color: #f3f3f3; + font-family:Verdana, Geneva, Tahoma, sans-serif; + overflow-y: scroll; + overflow-x: hidden; + display: flex; + flex-direction: column; + width: 100vw; + scroll-behavior: smooth slow; + z-index: 100; } main { - margin-top: 65px; - display: flex; - flex-direction: column; + margin-top: 65px; + display: flex; + flex-direction: column; } .intro { - height: 900px; - width: 100vw; - background-color: rgb(3, 2, 24); - color: white; - position: relative; - left: -10px; + height: 900px; + width: 100vw; + background-color: rgb(3, 2, 24); + color: white; + position: relative; + left: -10px; } #enter-watchdogs { - background-color: rgb(206, 206, 206); - color: rgba(10, 9, 71); - border: 2px solid rgb(255, 255, 255); - border-radius: 5px; - padding: 5px 10px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - height: 70px; - width: 200px; - font-weight: bold; - font-family:sans-serif; + background-color: rgb(206, 206, 206); + color: rgba(10, 9, 71); + border: 2px solid rgb(255, 255, 255); + border-radius: 5px; + padding: 5px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + height: 70px; + width: 200px; + font-weight: bold; + font-family:sans-serif; } #enter-watchdogs:hover { - background-color: #94ff73; - } + background-color: #94ff73; +} .app-preview { - height: 900px; - width: 100vw; - background-color: #b7ffb9; - color: white; - position: relative; - left: 0px; - position: relative; - left: -10px; + height: 900px; + width: 100vw; + background-color: #b7ffb9; + color: white; + position: relative; + left: 0px; + position: relative; + left: -10px; } #preview { - width: 70vw; - border: 10px solid rgb(255, 255, 255); - border-radius: 5px; + width: 70vw; + border: 10px solid rgb(255, 255, 255); + border-radius: 5px; } #preview-text { - color:#868686; - font-size: small; + color:#868686; + font-size: small; } section { - width: 100vw; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +width: 100vw; +overflow: hidden; +display: flex; +flex-direction: column; +justify-content: center; +align-items: center; } #app-intro{ - padding-top: 160px; - height: fit-content; - width: 100vw; +padding-top: 160px; +height: fit-content; +width: 100vw; } .team { - width: 100%; - max-width: 1600px; - display: flex; - flex-direction: row; - justify-content: space-evenly; - padding-top: 0px; - width: 80%; - min-height: 500px; - align-items: center; +width: 100%; +max-width: 1600px; +display: flex; +flex-direction: row; +justify-content: space-evenly; +padding-top: 0px; +width: 80%; +min-height: 500px; +align-items: center; } .center { - display: flex; - flex-direction: column; - justify-content: center; +display: flex; +flex-direction: column; +justify-content: center; } .heading{ - font-size: 45px; - margin: 10px 0 0 0; - text-align: center; - font-weight: bold; +font-size: 45px; +margin: 10px 0 0 0; +text-align: center; +font-weight: bold; } .text{ - color: rgba(0,0,0, 0.6); - font-size: 18px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - max-width: 700px; - margin: 10px 0 20px 0; +color: rgba(0,0,0, 0.6); +font-size: 18px; +display: flex; +justify-content: center; +align-items: center; +text-align: center; +max-width: 70vw; +margin: 10px 0 20px 0; } #team { - width: 100vw; - padding: 50px 0 200px 0; - justify-content: flex-start; - background-color: #cccccc; - position: relative; - left: -10px; +width: 100vw; +padding: 50px 0 200px 0; +justify-content: flex-start; +background-color: #cccccc; +position: relative; +left: -10px; } #team-heading{ - margin-bottom: 0px; +margin-bottom: 0px; } #team-holder { - flex-direction: column; - max-width: 1000px; - max-height: 500px; - height: 500px; +flex-direction: column; +max-width: 1000px; +max-height: 500px; +height: 500px; } #people-holder{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 100%; +display: flex; +flex-direction: row; +justify-content: center; +align-items: center; +width: 100%; } .team-person-holder{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 50px; +display: flex; +flex-direction: column; +justify-content: center; +align-items: center; +margin-top: 50px; } .team-person{ - border-radius: 100px; - overflow: hidden; - margin: 20px; - height: 200px; - width: 200px; - box-shadow: 0 0 2px 2px rgba(0,0,0,0.15); +border-radius: 100px; +overflow: hidden; +margin: 20px; +height: 200px; +width: 200px; +box-shadow: 0 0 2px 2px rgba(0,0,0,0.15); } .team-text{ - color: rgba(0,0,0, 1); - font-size: 18px; +color: rgba(0,0,0, 1); +font-size: 18px; +display: flex; +justify-content: center; +align-items: center; +text-align: center; +max-width: 700px; +margin: 0; +} + +#footer { + width: 100vw; + background: rgb(7, 7, 44); display: flex; + flex-direction: column; justify-content: center; align-items: center; - text-align: center; - max-width: 700px; - margin: 0; + position: relative; + left: -10px; + height: fit-content; + width: 100vw; } -#footer { - width: 100vw; - background: rgb(7, 7, 44); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - left: -10px; - height: fit-content; - width: 100vw; - } - .footer-item{ - color: white; - font-size: 20px; + color: white; + font-size: 20px; } .footer-subtext{ - color: white; - font-size: 15px; - width: 80vw; + color: white; + font-size: 15px; + width: 80vw; } .appinfotxt { - font-size: 15px; - color:rgb(3, 2, 24); +font-size: 15px; +color:rgb(3, 2, 24); +max-width: 70vw; +} + +.h2 { +font-size: 30px; +color: black; } +#return-to-landing { +z-index: 1000; +} diff --git a/react-frontend/src/images/mainlogo.png b/react-frontend/src/images/mainlogo.png new file mode 100644 index 0000000..a26df0f Binary files /dev/null and b/react-frontend/src/images/mainlogo.png differ -- cgit v1.2.3-70-g09d2