updating files

oliviamates · Feb 8, 2025 · 5280884 · 5280884
1 parent b01cc31
commit 5280884
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -4,16 +4,18 @@
 
   <head>
     <link rel="stylesheet" href="mystyle.css">
-    <title>Title</title>
+    <title>Leftover Love</title>
   </head>
 
   <body>
-      <h1 class="header">Leftover Lovers</h1>
-      <h3 class="header">Are you a</h3>
-      <button class="header" onclick="location.href='user.html'">USER</button>
-      <button class="header" onclick="location.href='restaurant.html'">RESTAURANT</button>
+      <h1 class="header" id="title">LEFTOVER LOVE</h1>
+      <h1 id="question" class="header">Are you a...</h1>
+      <div class="button-container">
+        <button class="button-56" id="click1" onclick="location.href='user.html'">USER</button>
+        <button class="button-56" id="click2" onclick="location.href='restaurantlogin.html'">RESTAURANT</button>
+      </div>
 
-      <h2 class="header">About Us!</h2>
+      <h1 id="about" class="header">About Us!</h1>
       <h3 class="header">We are a .....</h3>
 
   </body>

diff --git a/myrestaurant.css b/myrestaurant.css
@@ -0,0 +1,66 @@
+/* Bordered form */
+body {
+    background-color: #fefae0;
+}
+form {
+    border: 3px solid #f1f1f1;
+    width: 400px;
+    margin-left: 550px;
+    margin-top: 100px;
+    background-color: white;
+  }
+
+  /* Full-width inputs */
+  input[type=text], input[type=password] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+  }
+
+  /* Set a style for all buttons */
+  button {
+    background-color: #ccd5ae;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  /* Add a hover effect for buttons */
+  button:hover {
+    opacity: 0.8;
+  }
+
+  /* Extra style for the cancel button (red) */
+  .cancelbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #ccd5ae;
+  }
+
+  /* Add padding to containers */
+  .container {
+    padding: 16px;
+  }
+
+  /* The "Forgot password" text */
+  span.psw {
+    float: right;
+    padding-top: 16px;
+  }
+
+  /* Change styles for span and cancel button on extra small screens */
+  @media screen and (max-width: 300px) {
+    span.psw {
+      display: block;
+      float: none;
+    }
+    .cancelbtn {
+      width: 100%;
+    }
+  }
diff --git a/mystyle.css b/mystyle.css
@@ -1,11 +1,102 @@
 body {
-    background-color: beige; 
+    background-color: #fefae0;
 }
 .header {
     text-align: center;
     margin: auto;
     width: 50%;
     padding: 10px;
-    color: red;
+}
+#title {
+    margin-top: 100px;
+    font-family: Georgia, serif;
+    font-size: 100px;
+    color: #d4a373;
+}
+#question {
+    margin-top: 150px;
+    font-family: Georgia, serif;
+    color: #814e18;
+    font-size: 40px;
+
+}
+#about {
+    font-family: Georgia, serif;
+    color: #814e18;
+    font-size: 55px;
+}
+#click1, #click2 {
+    margin-bottom: 100px;
+    margin-top: 40px;
+}
+#click1 {
+    margin-left: 70px;
+}
+#click2 {
+    margin-left: 150px;
+}
+.button-container {
+    display: flex;
+    justify-content: center; /* Center buttons horizontally */
+    gap: 20px; /* Adjust space between buttons */
+    margin-top: 50px;
+}
+
+.button-56 {
+  align-items: center;
+  background-color: #ccd5ae;
+  border: 2px solid #111;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #111;
+  cursor: pointer;
+  display: flex;
+  font-family: Inter,sans-serif;
+  font-size: 16px;
+  height: 48px;
+  justify-content: center;
+  line-height: 24px;
+  max-width: 100%;
+  padding: 0 25px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.button-56:after {
+  background-color: #111;
+  border-radius: 8px;
+  content: "";
+  display: block;
+  height: 48px;
+  left: 0;
+  width: 100%;
+  position: absolute;
+  top: -2px;
+  transform: translate(8px, 8px);
+  transition: transform .2s ease-out;
+  z-index: -1;
+}
+
+.button-56:hover:after {
+  transform: translate(0, 0);
+}
+
+.button-56:active {
+  background-color: #e9edc9;
+  outline: 0;
+}
+
+.button-56:hover {
+  outline: 0;
+}
+
+@media (min-width: 768px) {
+  .button-56 {
+    padding: 0 40px;
+  }
 }
 
diff --git a/myuser.css b/myuser.css
diff --git a/restaurantlogin.html b/restaurantlogin.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+      <link rel="stylesheet" href="myrestaurant.css">
+        <title>Restaurant Page</title>
+    </head>
+    <body>
+      <script>
+        function redirectUser() {
+            // You can add validation here if needed
+            window.location.href = "restaurant.html"; // Redirect to user.html
+            return false; // Prevent actual form submission
+        }
+        </script>
+        <form action="action_page.php" method="post"  onsubmit="return redirectUser()">
+
+            <div class="container">
+              <label for="uname"><b>Username</b></label>
+              <input type="text" placeholder="Enter Username" name="uname" required>
+
+              <label for="psw"><b>Password</b></label>
+              <input type="password" placeholder="Enter Password" name="psw" required>
+
+              <button type="submit">Login</button>
+              <label>
+                <input type="checkbox" checked="checked" name="remember"> Remember me
+              </label>
+            </div>
+
+            <div class="container" style="background-color:#f1f1f1">
+              <button type="button" class="cancelbtn">Cancel</button>
+              <span class="psw">Forgot <a href="#">password?</a></span>
+            </div>
+          </form>
+    </body>
+</html>
diff --git a/user.html b/user.html
@@ -2,32 +2,25 @@
 
 <html>
     <head>
-        <link ref="stylesheet" href="user.css"/>
-        <title>User Page</title>
+        <script type="text/javascript" src= "script.js"></script>
+        <script async src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBLvKksC_A6VUn2n0YdRsHcEN0TcC7ZRy8&callback=initMap"></script>
+        <title>Welcome User</title>
     </head>
     <body>
-        <form action="action_page.php" method="post">
-            <div class="imgcontainer">
-              <img src="img_avatar2.png" alt="Avatar" class="avatar">
-            </div>
-
-            <div class="container">
-              <label for="uname"><b>Username</b></label>
-              <input type="text" placeholder="Enter Username" name="uname" required>
-
-              <label for="psw"><b>Password</b></label>
-              <input type="password" placeholder="Enter Password" name="psw" required>
-
-              <button type="submit">Login</button>
-              <label>
-                <input type="checkbox" checked="checked" name="remember"> Remember me
-              </label>
-            </div>
-
-            <div class="container" style="background-color:#f1f1f1">
-              <button type="button" class="cancelbtn">Cancel</button>
-              <span class="psw">Forgot <a href="#">password?</a></span>
-            </div>
-          </form>
+
+        <script>
+            // Initialize Google Places Autocomplete for start and end inputs
+            function initializeAutocomplete() {
+                var startInput = document.getElementById('start');
+                var endInput = document.getElementById('end');
+
+                var autocompleteStart = new google.maps.places.Autocomplete(startInput);
+                var autocompleteEnd = new google.maps.places.Autocomplete(endInput);
+            }
+
+            // Load the Google Maps Places library and initialize autocomplete
+            google.maps.event.addDomListener(window, 'load', initializeAutocomplete);
+        </script>
+
     </body>
 </html>