aboutsummaryrefslogtreecommitdiff
path: root/react-frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'react-frontend/src')
-rw-r--r--react-frontend/src/App.js3
-rw-r--r--react-frontend/src/components/HubList.js1
-rw-r--r--react-frontend/src/components/Modal.js70
-rw-r--r--react-frontend/src/css/Landing.css195
-rw-r--r--react-frontend/src/css/Modal.css146
-rw-r--r--react-frontend/src/images/reagan.pngbin0 -> 2150995 bytes
6 files changed, 415 insertions, 0 deletions
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) ? <Loading></Loading> :
<div className="App">
+ <Modal>PHP</Modal>
<header className="App-header">Welcome to WatchDogs!</header>
<div className="Canvas-filler Canvas-filler-1"></div>
<div className="Canvas-filler Canvas-filler-2"></div>
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..ad69650
--- /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 (
+ <div>
+ <div id="main-modal"className="modal" style={{display : 'block'}}>
+ {(count == 0) && <p className="m modal0">
+ <p className="align-center"><span className="span">Welcome to WatchDogs!</span></p>
+ <p className="align-center">Click start for an introduction to the WatchDogs interface.</p>
+ <p className="align-center"><button className="next" onClick={nextModal1}>Start</button></p>
+ <p className="align-center"><button className="skip" onClick={exitModal}>Skip</button></p>
+ </p>}
+ {(count == 1) && <p className="m modal1">
+ <p className="align-right"><i class="arrow right"></i></p>
+ <span className="span">This is the suspicion ranking pane,</span> 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.
+ <p className="align-center"><button className="next" onClick={nextModal2}>Next</button></p>
+ </p>}
+ {(count == 2) && <p className="m modal2">
+ <p></p>
+ <span className="span">The Timeframe pane </span>
+ 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.
+ <p className="align-center"><button className="next" onClick={nextModal3}>Next</button></p>
+ <p className="align-right"><i class="arrow down"></i></p>
+ </p>}
+ {count == 3 && <p className="m modal3">
+ <p className="align-left"><i class="arrow left"></i></p>
+ <span className="span">The Trader Graph </span>
+ shows how traders are related. Click on a name in the graph to see more information about that individual.
+ <p className="align-center"><button className="next" onClick={nextModal4}>Next</button></p>
+ </p>}
+ {count == 4 && <p className="m modal4">
+ <button className="next" onClick={exitModal}>You're ready to start using WatchDogs!</button>
+ </p>}
+ </div>
+ <span className="restart-modal align-center" onClick={startModal}></span>
+ </div>
+ );
+}
+
+export default Modal; \ No newline at end of file
diff --git a/react-frontend/src/css/Landing.css b/react-frontend/src/css/Landing.css
new file mode 100644
index 0000000..e6841f8
--- /dev/null
+++ b/react-frontend/src/css/Landing.css
@@ -0,0 +1,195 @@
+.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;
+ display: flex;
+ flex-direction: column;
+ width: 80vw;
+}
+main {
+ margin-top: 65px;
+ display: flex;
+ flex-direction: column;
+}
+
+.intro {
+ height: 1000px;
+ width: 100vw;
+ background-color: rgb(3, 2, 24);
+ color: white;
+ position: relative;
+ left: -10px;
+}
+
+.app-preview {
+ height: 1000px;
+ width: 100vw;
+ background-color: #b7ffb9;
+ color: white;
+ position: relative;
+ left: 0px;
+ position: relative;
+ left: -10px;
+}
+
+section {
+ width: 100vw;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+}
+
+#app-intro{
+ padding-top: 160px;
+}
+
+.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;
+}
+
+.center {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.heading{
+ 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;
+}
+
+#team {
+ width: 100vw;
+ padding: 50px 0 200px 0;
+ justify-content: flex-start;
+ background-color: #cccccc;
+ position: relative;
+ left: -10px;
+}
+
+#team-heading{
+ margin-bottom: 0px;
+}
+
+#team-holder {
+ 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%;
+}
+
+.team-person-holder{
+ 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);
+}
+
+.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;
+ position: relative;
+ left: -10px;
+ }
+
+.footer-item{
+ color: white;
+ font-size: 20px;
+}
+
+
diff --git a/react-frontend/src/css/Modal.css b/react-frontend/src/css/Modal.css
new file mode 100644
index 0000000..96f9066
--- /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;
+ }
+
+
diff --git a/react-frontend/src/images/reagan.png b/react-frontend/src/images/reagan.png
new file mode 100644
index 0000000..15c02f0
--- /dev/null
+++ b/react-frontend/src/images/reagan.png
Binary files differ
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 21:14:39 +0000