1 files changed, 70 insertions, 0 deletions
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