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 --- 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 +- 4 files changed, 207 insertions(+), 15 deletions(-) delete mode 100644 react-frontend/src/components/landing.html create mode 100644 react-frontend/src/css/Landing.css (limited to 'react-frontend/src') 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