landing page nav bar done

author: 9308233900 <reagan_hunt@brown.edu> 2021-04-17 16:41:56 -0700
committer: 9308233900 <reagan_hunt@brown.edu> 2021-04-17 16:41:56 -0700
commit: 860ba5b0e34ecdd27d2ec081191ab5bf9b32524b (patch)
tree: c5824a566c42bd3214508f463dd635b39d41cf31
parent: cdcf7602c5fd2066f69fdbe64562e2faca915422 (diff)
8 files changed, 63 insertions, 13 deletions
diff --git a/landing.html b/landing.html
index c87d582..47ca60e 100644
--- a/landing.html
+++ b/landing.html
@@ -8,19 +8,23 @@
   <body>
     <div class="nav-bar">
       <div class="topnav">
-        <a href="#about">About</a>
-        <a href="#contact">Contact</a>
-        <a href="#news">News</a>
-        <a class="active" href="#home">Home</a>
+        <a href="#team">Team</a>
+        <a href="#app-intro">About</a>
+        <a href="#intro">Home</a>
       </div>
     </div>
+
   <main>
 
-    <section class="intro">Hello welcome to watchdog
-      <button>ENTER WATCHDOGS</button>
+    <section id="intro" class="intro">
+      <img src="react-frontend/src/components/images/mainlogo.png" alt="logo">
+      <button id="enter-watchdogs">ENTER</button>
     </section>
 
-    <section class="app-preview">pic preview</section>
+    <section id="1" class="app-preview">
+      <img id="preview" src="react-frontend/src/images/previewwatchdog.png">
+      <span id="preview-text">preview</span>
+    </section>
 
     <section id="app-intro">
       <h1 class="heading"> Our App </h1>
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) ? <Loading></Loading> :     
         <div className="App">
           <Modal>PHP</Modal>
-          <header className="App-header">Welcome to WatchDogs!</header>
+          <header id="in-app-logo-holder" className="App-header">
+            <img id="in-app-logo" src={logo} alt="logo"/></header>
           <div className="Canvas-filler Canvas-filler-1"></div>
           <div className="Canvas-filler Canvas-filler-2"></div>
           <div className="Canvas-filler Canvas-filler-3"></div>
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) {
         <DateSelector side={"left"} name={"Start Date"} className="Coord-select-left" clickedFunc={setCurrent}
           changedFunc={setStartDate}  disabled={current==='start' || props.isChanging} value={toValue(startDate)}></DateSelector>
         <div>
-          <h2>Adjust Timeframe :)</h2>
+          <h2>Adjust Timeframe</h2>
           <button className="Btn Route-btn" onClick={() => changeTimeframe()}
           disabled={current!=="" || props.isChanging}>Change Timeframe</button>
         </div>
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
--- /dev/null
+++ b/react-frontend/src/components/images/logo.png
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
--- /dev/null
+++ b/react-frontend/src/components/images/mainlogo.png
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
--- /dev/null
+++ b/react-frontend/src/images/previewwatchdog.png
author	9308233900 <reagan_hunt@brown.edu>	2021-04-17 16:41:56 -0700
committer	9308233900 <reagan_hunt@brown.edu>	2021-04-17 16:41:56 -0700
commit	860ba5b0e34ecdd27d2ec081191ab5bf9b32524b (patch)
tree	c5824a566c42bd3214508f463dd635b39d41cf31
parent	cdcf7602c5fd2066f69fdbe64562e2faca915422 (diff)