Edited index to be a simple home page

danaimone · Feb 26, 2021 · 8700f76 · 8700f76
1 parent 6e37b3a
commit 8700f76
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 4 deletions.
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
@@ -0,0 +1,105 @@
+$primary: #7dceb4
+$secondary: #7f58cc
+$primary-compliment: #6fad9a
+$secondary-compliment: #614599
+$gray: #f5f5f5
+$font-family: Arial, Helvetica, sans-serif
+
+*
+  font-family: arial
+  margin: auto
+  padding: 0
+  height
+
+nav
+
+  background-color: $primary
+  padding: 1rem
+  height: 5vh
+
+  ul
+    margin: 0
+    padding: 0
+    list-style: none
+
+  li
+    display: inline-block
+
+  a
+    display: block
+    padding: 6px 12px
+    text-decoration: none
+    color: white
+
+
+
+
+#grid-container
+  display: grid
+  grid-template-columns: 1fr
+  grid-template-rows: 1fr 2fr
+  gap: 0 0
+  height: 100%
+
+#welcome
+  grid-area: 1 / 1 / 2 / 2
+  color: $secondary-compliment
+  align-items: center
+  height: 30%
+  text-align: center
+
+
+#buttons
+  display: grid
+  grid-template-columns: 1fr 1fr 1fr 1fr
+  grid-template-rows: 0.6fr 1.4fr
+  gap: 0 0
+  grid-area: 2 / 1 / 3 / 2
+  width: 100%
+  height: 100%
+  a
+    color: white
+    border-radius: 10px
+    padding: 0.5rem
+    margin: 0.25rem
+    background-color: $primary
+    box-shadow: 0 3px $primary-compliment
+    &:hover
+      background-color: $primary-compliment
+    &:active
+    background-color: green
+
+
+#page-1
+  grid-area: 1 / 1 / 2 / 2
+  display: flex
+#page-2
+  grid-area: 1 / 2 / 2 / 3
+  display: flex
+#page-3
+  grid-area: 1 / 3 / 2 / 4
+  display: flex
+#page-4
+  grid-area: 1 / 4 / 2 / 5
+  display: flex
+
+
+.action-button
+  border-radius: 10px
+  padding: 0.5rem
+  margin: 0.25rem
+  &.primary
+    background-color: $primary
+    box-shadow: 0 3px $primary-compliment
+    &:hover
+      background-color: $primary-compliment
+
+  &.secondary
+    background-color: $secondary
+    box-shadow: 0 3px $secondary-compliment
+    &:hover
+      background-color: $secondary-compliment
+
+  &:active
+    background-color: green
+
diff --git a/routes/index.js b/routes/index.js
@@ -3,12 +3,23 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Mutual Aid' });
+  res.render('index', { title: 'Mutual Aid' , layout: false});
 });
 
+/* GET Tickets page. */
 router.get('/tickets', function(req, res, next) {
   res.render('tickets', { title: 'Tickets', layout: false} );
 });
 
+/* GET FAQ page. */
+router.get('/faq', function(req, res, next) {
+  res.render('faq', { title: 'faq', layout: false} );
+});
+
+/* GET Map page. */
+router.get('/map', function(req, res, next) {
+  res.render('map', { title: 'Map - Mutual Aid', layout: false} );
+});
+
 
 module.exports = router;
diff --git a/views/index.hbs b/views/index.hbs
@@ -1,2 +1,41 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<html>
+<head>
+    <title>{{title}}</title>
+    <link rel="stylesheet" href="/stylesheets/index.css">
+</head>
+<body>
+
+<nav>
+    <ul>
+        <li>
+            <h1><a href='#'>Mutual Aid</a></h1>
+        </li>
+    </ul>
+</nav>
+
+
+
+<div id="grid-container">
+    <div id="welcome">
+        <h1>Welcome</h1>
+        <p>Please Select the following to navigate the page:</p>
+    </div>
+    <div id="buttons">
+        <div id="page-1">
+            <h3><a href="/faq">FAQ</a></h3>
+        </div>
+        <div id="page-2">
+            <h3><a href="/login">Login Page</a></h3>
+        </div>
+        <div id="page-3">
+            <h3><a href="/map">Map Page</a></h3>
+        </div>
+        <div id="page-4">
+            <h3><a href="/tickets">Tickets Page</a></h3>
+        </div>
+
+    </div>
+</div>
+
+</body>
+</html>