ftPeter · Vicann · Mar 18, 2021 · Mar 20, 2021 · Mar 20, 2021 · Mar 20, 2021
diff --git a/public/Order Confirmation/Images/Umass_Amherst.png b/public/Order Confirmation/Images/Umass_Amherst.png
diff --git a/public/Order Confirmation/Images/umass_cicle_logo.png b/public/Order Confirmation/Images/umass_cicle_logo.png
diff --git a/public/Order Confirmation/orderConfirmation.css b/public/Order Confirmation/orderConfirmation.css
@@ -0,0 +1,50 @@
+body {
+  background-image: linear-gradient(-225deg, brown 0%, peru 100%);
+  background-image: linear-gradient(to top, brown 0%, peru 100%);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  height: 100%;
+}
+.box1 {
+  border: 5px solid white;
+  width: 300px;
+  height: 100px;
+  text-align: center;
+  position: relative;
+  margin: auto;
+  bottom: -400px;
+  font-size: 30px;
+}
+.box2 {
+  border: 5px solid white;
+  width: 300px;
+  height: 100px;
+  text-align: center;
+  position: relative;
+  margin: auto;
+  bottom: -600px;
+  left: -200px;
+  font-size: 30px;
+}
+.box3 {
+  border: 5px solid white;
+  width: 300px;
+  height: 100px;
+  text-align: center;
+  position: relative;
+  margin: auto;
+  bottom: -600px;
+  left: 200px;
+  top: 491px;
+  font-size: 30px;
+}
+h1 {
+  position: relative;
+  color: white;
+  text-align: center;
+}
+img {
+  position: absolute;
+  height: 100px;
+  left: 20px;
+}
diff --git a/public/Order Confirmation/orderConfirmation.html b/public/Order Confirmation/orderConfirmation.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="orderConfirmation.css" />
+
+    <title>Umass Pick Up Service Website</title>
+  </head>
+  <body>
+    <h1>Order Confirmation Page</h1>
+    <img src="images/umass_cicle_logo.png" alt="Umass Logo" />
+    <div class="box1">Order Status</div>
+    <div class="box2">Order Number</div>
+    <div class="box3">Order Estimate</div>
+  </body>
+</html>
diff --git a/public/confirmation.html b/public/confirmation.html
@@ -1,44 +1,47 @@
 <html lang="en">
-    <link href="restaurant.css" rel="stylesheet">
-    <meta charset="UTF-8">
-    <head>
-        <title>Chez 326 - Order Confirmation</title>
-    </head>
-    <body>
-        <h1>Chez 326 - Order Confirmation</h1>
-        <form action="/confirm" method="POST">
-            <h2>Customer Name</h2>
-            <div class=customer>
-                <div>
-                    <label for="first">First Name:</label>
-                    <input type="text" name="first" id="first" value="Peter" readonly>
-                </div>
-                <div>
-                    <label for="last">Last Name:</label>
-                    <input type="text" name="last" id="last" value="Klemperer" readonly>
-                </div>
-            </div>
-            <h2>Customer Address</h2>
-            <p>Please enter your delivery address.</p>
-            <div class=rightalign>
-                <label for="streetaddress">Street Address:</label>
-                <input type="text" name="streetaddress" id="streetaddress">
-            </div>
-            <div class=rightalign>
-                <label for="cityaddress">City, State:</label>
-                <input type="text" name="cityaddress" id="cityaddress">
-            </div>
+<link href="restaurant.css" rel="stylesheet">
+<meta charset="UTF-8">
+
+<head>
+    <title>Chez 326 - Order Confirmation</title>
+</head>
+
+<body>
+    <h1>Chez 326 - Order Confirmation</h1>
+    <form action="/confirm" method="POST">
+        <h2>Customer Name</h2>
+        <div class=customer>
             <div>
-                <h2>Order</h2>
-                <label for="order">Order:</label>
-                <textarea type="text" name="order" id="order" rows="4" cols="25" readonly>Chicken Fried Steak with Corn Bread, Green Beans, Baked Beans.
-                </textarea>
+                <label for="first">First Name:</label>
+                <input type="text" name="first" id="first" value="Peter" readonly>
             </div>
             <div>
-                <label for="time">Order Time:</label>
-                <input type="datetime-local" name="time" id="time" readonly>
+                <label for="last">Last Name:</label>
+                <input type="text" name="last" id="last" value="Klemperer" readonly>
             </div>
-            <input type="submit">
-        </form>
-    </body>
-</html>
+        </div>
+        <h2>Customer Address</h2>
+        <p>Please enter your delivery address.</p>
+        <div class=rightalign>
+            <label for="streetaddress">Street Address:</label>
+            <input type="text" name="streetaddress" id="streetaddress">
+        </div>
+        <div class=rightalign>
+            <label for="cityaddress">City, State:</label>
+            <input type="text" name="cityaddress" id="cityaddress">
+        </div>
+        <div>
+            <h2>Order</h2>
+            <label for="order">Order:</label>
+            <textarea type="text" name="order" id="order" rows="4" cols="25" readonly>Chicken Fried Steak with Corn Bread, Green Beans, Baked Beans.
+                </textarea>
+        </div>
+        <div>
+            <label for="time">Order Time:</label>
+            <input type="datetime-local" name="time" id="time" readonly>
+        </div>
+        <input type="submit">
+    </form>
+</body>
+
+</html>
diff --git a/public/contact/contact.css b/public/contact/contact.css
@@ -0,0 +1,55 @@
+* {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+body {
+    background-image: linear-gradient(-225deg, brown 0%, peru 100%);
+    background-image: linear-gradient(to top, brown 0%, peru 100%);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    color: white
+}
+
+#iframe {
+    display: block;
+    text-align: center;
+}
+
+iframe {
+    border: 5px solid rgb(177, 174, 174);
+    border-radius: 10px;
+    width: 700px;
+    height: 500px;
+}
+
+#description {
+    /* font-family: "system-ui"; */
+    font-size: large;
+    display: block;
+    text-align: center;
+    width: 800px;
+    height: 20px;
+    background-color: rgb(110, 110, 110);
+    border-radius: 10px;
+    padding: 10px;
+    margin: auto;
+}
+
+#contact-info address {
+    display: block;
+    border: 5px solid rgb(177, 174, 174);
+    border-radius: 10px;
+    padding: 10px;
+    width: 700px;
+    height: 175px;
+    margin: auto;
+    text-align: left;
+}
+
+#contact-info address ul li {
+    list-style-type: none;
+}
+
+a {
+    color: black;
+}
diff --git a/public/contact/contact.html b/public/contact/contact.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Contact Page</title>
+    <link rel="shortcut icon" href="images/umass_circle_logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="contact.css">
+    <script src="contact.js"></script>
+</head>
+
+<body>
+    <p id="description">Map of Blue Wall</p>
+    <br>
+    <div id="iframe">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2946.688498400298!2d-72.52919278454607!3d42.3917819410902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e6d270c7fe958d%3A0xaa4b7f1d8344b53e!2sBlue%20Wall!5e0!3m2!1sen!2sus!4v1616207483814!5m2!1sen!2sus"
+            allowfullscreen="" loading="lazy" title="Blue Wall Map"></iframe>
+    </div>
+    <br>
+    <p id="description">Contact</p>
+    <br>
+    <div id="contact-info">
+        <address>
+            <p><strong>Located in:</strong> University of Massachusetts Amherst</p>
+            <p><strong>Address:</strong> 1 Campus Center Way, Amherst, MA 01003</p>
+            <p><strong>Hours:</strong> 11 AM - 9 PM (All Week)</p>
+            <p><strong>Phone:</strong> <a href="tel:+14135778114">(413) 577-8114</a></p>
+        </address>
+    </div>
+</body>
+
+</html>
diff --git a/public/contact/contact.js b/public/contact/contact.js
diff --git a/public/images/chefs-table.png b/public/images/chefs-table.png
diff --git a/public/images/deli_delish.png b/public/images/deli_delish.png
diff --git a/public/images/green_fields.png b/public/images/green_fields.png
diff --git a/public/images/harvest_market.png b/public/images/harvest_market.png
diff --git a/public/images/paciugo.png b/public/images/paciugo.png
diff --git a/public/images/peoples_organic.png b/public/images/peoples_organic.png
diff --git a/public/images/star_ginger.png b/public/images/star_ginger.png
diff --git a/public/images/tamales.png b/public/images/tamales.png
diff --git a/public/images/tavola.png b/public/images/tavola.png
diff --git a/public/images/the_grill.png b/public/images/the_grill.png
diff --git a/public/images/umass_circle_logo.png b/public/images/umass_circle_logo.png
diff --git a/public/images/wasabi.png b/public/images/wasabi.png
diff --git a/public/images/yum_bakery.png b/public/images/yum_bakery.png
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,76 @@
+* {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+body {
+    background-image: linear-gradient(-225deg, brown 0%, peru 100%);
+    background-image: linear-gradient(to top, brown 0%, peru 100%);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+ul.icon-and-title {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+ul.icon-and-title li {
+    float: left;
+}
+
+ul.icon-and-title li img,
+ul.icon-and-title li h1 {
+    display: block;
+    padding: 14px 16px;
+}
+
+img {
+    height: 100px;
+}
+
+#title {
+    color: rgb(75, 77, 75);
+    font-size: 40pt;
+}
+
+ul.topnav {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: rgb(168, 165, 165);
+}
+
+ul.topnav li {
+    float: left;
+}
+
+ul.topnav li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 25px;
+}
+
+li:last-child {
+    border-right: none;
+}
+
+ul.topnav li a:hover:not(.active) {
+    background-color: rgb(168, 165, 165);
+}
+
+ul.topnav li a.active {
+    background-color: rgb(75, 77, 75);
+}
+
+@media screen and (max-width: 600px) {
+    ul.topnav,
+    ul.topnav li {
+        float: none;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -1,12 +1,31 @@
-<html>
-    <head>
-        <title>326 Base Project</title>
-    </head>
-    <body>
-        <h1>326 Base Project</h1>
-        <p>You have successfully opened your Heroku project. 
-        Feel free to replace this file with the first page of your
-        web site.
-        </p>
-    </body>
-</html>
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Umass Pick-Up</title>
+    <link rel="shortcut icon" href="images/umass_circle_logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script>
+</head>
+
+<body>
+    <ul class="icon-and-title">
+        <li><img src="images/umass_circle_logo.png" alt="Umass Amherst Logo"></li>
+        <li>
+            <h1 id="title">Umass Pick-Up</h1>
+        </li>
+    </ul>
+
+    <div>
+        <ul class="topnav">
+            <li><a class="active" href="#home">Home</a></li>
+            <li><a routerLink="/orders" href="#orders">Orders</a></li>
+            <li><a routerLink="/contact" href="#contact">Contact</a></li>
+        </ul>
+    </div>
+    <router-outlet></router-outlet>
+</body>
+
+</html>