-
Notifications
You must be signed in to change notification settings - Fork 337
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'PriyaGhosal:main' into cks-master
- Loading branch information
Showing
8 changed files
with
461 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| .book-now-button { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| padding: 12px 24px; | ||
| border: none; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .modal1 { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 1; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .modal-content1 { | ||
| background-color: white; | ||
| padding: 15px; | ||
| border-radius: 10px; | ||
| width: 600px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .modal-header1 { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .modal-body1 { | ||
| margin-top: 10px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .dropdown, .input-field { | ||
| margin-top: 15px; | ||
| } | ||
|
|
||
| .dropdown select, .input-field input { | ||
| padding: 8px; | ||
| width: 100%; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .close-btn1 { | ||
| background-color: #f44336; | ||
| color: white; | ||
| border: none; | ||
| padding: 8px 16px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| /* margin-top: 15px; */ | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .form-button { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| padding: 10px 20px; | ||
| border-radius: 5px; | ||
| margin-top: 15px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .trek-details { | ||
| margin-top: 15px; | ||
| background-color: #f4f4f4; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .trek-details p { | ||
| margin: 5px 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
|
|
@@ -6,6 +7,7 @@ | |
| <title>Himachal Pradesh Adventure Treks</title> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="himachal.html"> | ||
| <link rel="stylesheet" href="Booknow.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container-fluid py-5 trek-header"> | ||
|
|
@@ -149,12 +151,125 @@ <h4>Exclusions</h4> | |
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| <button type="button" class="btn btn-primary">Book Now</button> | ||
| <div class="book-now-container"> | ||
| <button class="book-now-button" onclick="openModal()">Book Now</button> | ||
| </div> | ||
|
|
||
| <div id="bookingModal" class="modal1"> | ||
| <div class="modal-content1"> | ||
| <div class="modal-header1">Trek Booking Form</div> | ||
| <div class="modal-body1"> | ||
| <p>Please fill in your details:</p> | ||
|
|
||
| <!-- User Details Form --> | ||
| <div class="input-field"> | ||
| <label for="name">Full Name</label> | ||
| <input type="text" id="name" placeholder="Enter your name" required> | ||
| </div> | ||
|
|
||
| <div class="input-field"> | ||
| <label for="email">Email</label> | ||
| <input type="email" id="email" placeholder="Enter your email" required> | ||
| </div> | ||
|
|
||
| <div class="input-field"> | ||
| <label for="phone">Phone Number</label> | ||
| <input type="tel" id="phone" placeholder="Enter your phone number" required> | ||
| </div> | ||
|
|
||
| <div class="dropdown"> | ||
| <label for="trekSelection">Select a Trek</label> | ||
| <select id="trekSelection" onchange="updateTrekDetails()"> | ||
| <option value="Triund Trek">Triund Trek</option> | ||
| <option value="Hampta Pass Trek">Hampta Pass Trek</option> | ||
| <option value="Bhrigu Lake Trek">Bhrigu Lake Trek</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <!-- Trek Details Section --> | ||
| <div id="trekDetails" class="trek-details"> | ||
| <!-- Trek details will be populated here based on the selection --> | ||
| </div> | ||
|
|
||
| <button class="form-button" onclick="confirmBooking()">Confirm Booking</button> | ||
| </div> | ||
| <button class="close-btn1" onclick="closeModal()">Close</button> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| // Trek details for each option | ||
| const trekInfo = { | ||
| "Triund Trek": { | ||
| description: "A beautiful 2-day trek near Dharamshala with stunning views of the Dhauladhar range.", | ||
| duration: "Duration: 2 days", | ||
| difficulty: "Difficulty: Easy to Moderate", | ||
| bestTime: "Best Time: March to June, September to November" | ||
| }, | ||
| "Hampta Pass Trek": { | ||
| description: "A diverse 5-day trek crossing from lush Kullu Valley to the arid Spiti region.", | ||
| duration: "Duration: 5 days", | ||
| difficulty: "Difficulty: Moderate", | ||
| bestTime: "Best Time: June to September" | ||
| }, | ||
| "Bhrigu Lake Trek": { | ||
| description: "A 4-day trek to a high-altitude glacial lake near Manali with panoramic views.", | ||
| duration: "Duration: 4 days", | ||
| difficulty: "Difficulty: Moderate to Difficult", | ||
| bestTime: "Best Time: May to October" | ||
| } | ||
| }; | ||
|
|
||
| // Function to open the modal | ||
| function openModal() { | ||
| document.getElementById("bookingModal").style.display = "flex"; | ||
| updateTrekDetails(); // Update trek details for the first selected option | ||
| } | ||
|
|
||
| // Function to close the modal | ||
| function closeModal() { | ||
| document.getElementById("bookingModal").style.display = "none"; | ||
| } | ||
|
|
||
| // Function to update trek details based on the selection | ||
| function updateTrekDetails() { | ||
| var selectedTrek = document.getElementById("trekSelection").value; | ||
| var trekDetails = trekInfo[selectedTrek]; | ||
|
|
||
| var detailsHTML = ` | ||
| <p><strong>${selectedTrek}</strong></p> | ||
| <p>${trekDetails.description}</p> | ||
| <p>${trekDetails.duration}</p> | ||
| <p>${trekDetails.difficulty}</p> | ||
| <p>${trekDetails.bestTime}</p> | ||
| `; | ||
|
|
||
| document.getElementById("trekDetails").innerHTML = detailsHTML; | ||
| } | ||
|
|
||
| // Function to confirm the booking based on input details | ||
| function confirmBooking() { | ||
| var name = document.getElementById("name").value; | ||
| var email = document.getElementById("email").value; | ||
| var phone = document.getElementById("phone").value; | ||
| var selectedTrek = document.getElementById("trekSelection").value; | ||
|
|
||
| if (name && email && phone) { | ||
| alert("Thank you " + name + "! Your booking for " + selectedTrek + " has been confirmed. We will contact you at " + email + " or " + phone + "."); | ||
| closeModal(); | ||
| } else { | ||
| alert("Please fill in all the details before confirming."); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
| </body> | ||
| </html> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.