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/css/Landing.css | 202 +++++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 react-frontend/src/css/Landing.css (limited to 'react-frontend/src/css/Landing.css') 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; +} + -- 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/Landing.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/Landing.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/Landing.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/Landing.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