GFGVITAP · potnuruyaswanth · Oct 26, 2024
diff --git a/1.jpg b/1.jpg
diff --git a/2.jpg b/2.jpg
diff --git a/3.jpg b/3.jpg
diff --git a/4.jpg b/4.jpg
diff --git a/5.jpg b/5.jpg
diff --git a/Booking.html b/Booking.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Park Plaza Booking</title>
+    <style>
+        body::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            z-index: 0;
+        }
+        #bgvid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+        }
+        #content {
+            position: relative;
+            z-index: 1;
+        }
+        header {
+            background-image: url('images/logo.jpg');
+            background-size: cover;
+            background-color: #333;
+            padding: 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        header .logo {
+            display: flex;
+            align-items: center;
+        }
+        header .logo img {
+            height: 3rem;
+            margin-right: 1rem;
+            border-radius: 10px;
+        }
+        header h1 {
+            color: #fff;
+            font-size: 1.5rem;
+        }
+        header nav ul {
+            list-style: none;
+            display: flex;
+            align-items: center;
+        }
+        header nav ul li {
+            margin-right: 1rem;
+        }
+        header nav ul li a {
+            color: #fff;
+            text-decoration: none;
+        }
+        form {
+            height: 600px;
+            width: 300px;
+            padding-top: 50px;
+            padding-left: 550px;
+        }
+        label {
+            display: block;
+            margin-top: 10px;
+            font-size: xx-large;
+            color: black;
+        }
+        input[type="number"],
+        input[type="date"],
+        input[type="time"],
+        input[type="text"],
+        select {
+            width: 100%;
+            padding: 5px;
+            margin-top: 5px;
+        }
+        button {
+            background-color: blue;
+            color: white;
+            border: none;
+            padding: 10px;
+            margin-top: 20px;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <video autoplay loop muted id="bgvid">
+        <source src="images/route video.mp4" type="video/mp4">
+    </video>
+    <div id="content">
+        <header>
+            <div class="logo">
+                <img src="images/logo1.jpg" alt="Park Plaza Logo">
+                <h1>PARK PLAZA</h1>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="#">About</a></li>
+                    <li><a href="login.html">Login</a></li>
+                    <li><a href="signup.html">Sign Up</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <form class="form" id="bookingForm">
+            <label for="hours">Number of hours:</label>
+            <input type="number" id="hours" name="hours" min="1" max="12" required value="2">
+
+            <label for="startTime">Start time:</label>
+            <input type="time" id="startTime" name="startTime" required value="05:25">
+
+            <label for="endTime">End time:</label>
+            <input type="time" id="endTime" name="endTime" required value="07:15">
+
+            <label for="date">Fix your date:</label>
+            <input type="date" id="date" name="date" required value="2024-03-05">
+
+            <label for="paymentMethod">Payment Method:</label>
+            <select name="paymentMethod" id="paymentMethod" required>
+                <option value="upi">UPI ID</option>
+                <option value="debitCard">Debit Card</option>
+                <option value="creditCard">Credit Card</option>
+                <option value="phonePe">Phone Pe</option>
+                <option value="gpay">Gpay</option>
+            </select>
+
+            <label for="location">Location:</label>
+            <input type="text" id="location" name="location" required value="vijayawada">
+
+            <button type="submit" id="submitButton">Book</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('bookingForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            // Gather form data
+            const formData = {
+                hours: document.getElementById('hours').value,
+                startTime: document.getElementById('startTime').value,
+                endTime: document.getElementById('endTime').value,
+                date: document.getElementById('date').value,
+                paymentMethod: document.getElementById('paymentMethod').value,
+                location: document.getElementById('location').value
+            };
+
+            // Send form data using fetch
+            fetch("http://127.0.0.1:3000/book", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(formData)
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Success:', data);
+                window.location.href = "Location.html";
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/Location.html b/Location.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map Integration</title>
+    <style>
+      body{
+        font-family: Arial, sans-serif;
+        align-items: center;
+        justify-content: center;
+background-image: url(images/4.jpg);
+
+      }
+      header{
+        background-color: #f4f4f4;
+        padding: 20px;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+      #location-input {
+  margin-bottom: 20px;
+}
+
+#location-input label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 30px;
+  font-weight: 1000;
+  color:black;
+}
+
+#location-input input {
+  width: 100%;
+  padding: 10px;
+  border: 2px solid #e1e8ee;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #333;
+  transition: border-color 0.3s ease;
+}
+
+#location-input input:focus {
+  border-color: #4d90fe;
+  outline: none;
+}
+
+#checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  font-size: 30px;
+}
+
+#checkboxes label {
+  display: block;
+  margin-bottom: 5px;
+
+  font-size: 30px;
+  font-weight: 1000;
+  color:black;
+}
+
+#checkboxes input[type="checkbox"] {
+  width: 30px; /* This increases the width of the checkbox */
+  height: 30px; /* This increases the height of the checkbox */
+  margin-right: 10px;
+  font-size: 30px;
+
+}
+
+#map {
+  width: 100%;
+  height: 500px;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+button{
+  background-color: blue;
+  color: white;
+  border: none;
+  padding: 10px;
+  margin-top: 20px;
+  border-radius: 6px;
+  font-size: 30px;
+  font-weight: 1000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  align-items: center;
+}
+    </style>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
+      async
+    ></script>
+  </head>
+  <body>
+    <div id="location-input">
+      <label for="location">Enter your location:</label>
+      <input type="text" id="location" />
+    </div>
+    <div id="checkboxes">
+      <input type="checkbox" id="parking-slot" />
+      <label for="parking-slot">Parking slot</label>
+      <input type="checkbox" id="services" />
+      <label for="services">Services include</label>
+    </div>
+    <form id="locationForm" action="Services.html" method="post">
+      <!-- your form inputs here... -->
+      <button type="submit">Submit</button>
+    </form>
+<div id="map" style="width: 100%; height: 500px;"><img src="images/map.jpeg" alt="Description of the image"></div>
+    <script>
+      // Initialize and add the map
+      let map;
+      function initMap() {
+        map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
+          center: { lat: -34.397, lng: 150.644 },
+          zoom: 8,
+        });
+
+        // Add a click event listener to the map
+        map.addListener("click", (event) => {
+          const location = event.latLng;
+          const position = { lat: location.lat(), lng: location.lng() };
+
+          // Remove existing marker, if any
+          if (map.markers) {
+            map.markers.setMap(null);
+          }
+
+          // Add a new marker at the clicked location
+          map.markers = new google.maps.Marker({
+            position,
+            map,
+            title: "Your location",
+          });
+
+          // Update the location input field
+          document.getElementById("location")!.value = `(${position.lat}, ${position.lng})`;
+        });
+
+        // Initialize the location input field with the user's current location
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+            map.setCenter(pos);
+            map.markers = new google.maps.Marker({
+              position: pos,
+              map: map,
+              title: "Your location",
+            });
+          },
+          () => {
+            console.log("Error: The Geolocation service failed.");
+          }
+        );
+      }
+    </script>
+
+  </body>
+</html>