orientation completed

5 files changed, 230 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..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 (
+    <div>
+    <div id="main-modal"className="modal" style={{display : 'block'}}>
+      {(count == 0) && <p className="m modal0">
+        <p className="align-center"><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>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>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>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/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 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>WatchDogLanding</title>    
+  </head>
+  <body>
+   <p>Hello welcome to watchdog</p>
+  </body>
+</html>
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;
+  }
+
+