-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
148 additions
and
0 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,148 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>StaySeeker Hotel Bot</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f4f9; | ||
| color: #333; | ||
| } | ||
| .container { | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| background: #fff; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | ||
| } | ||
| h1 { | ||
| background-color: #d9534f; /* Red background */ | ||
| color: #fff; /* White text */ | ||
| padding: 15px; | ||
| border-radius: 5px; | ||
| font-size: 2em; | ||
| margin-bottom: 20px; | ||
| } | ||
| p { | ||
| line-height: 1.6; | ||
| margin-bottom: 20px; | ||
| } | ||
| button { | ||
| display: inline-block; | ||
| padding: 10px 20px; | ||
| font-size: 1em; | ||
| color: #fff; | ||
| background-color: #d9534f; /* Red background */ | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| button:hover { | ||
| background-color: #c9302c; /* Darker red on hover */ | ||
| } | ||
| .note { | ||
| font-size: 0.9em; | ||
| color: #555; | ||
| } | ||
| .chat-icon { | ||
| position: fixed; | ||
| bottom: 20px; | ||
| right: 20px; | ||
| width: 50px; | ||
| height: 50px; | ||
| background: #0056b3; | ||
| border-radius: 50%; | ||
| color: #fff; | ||
| text-align: center; | ||
| line-height: 50px; | ||
| font-size: 1.5em; | ||
| box-shadow: 0 0 10px rgba(0,0,0,0.2); | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| .chat-icon:hover { | ||
| background-color: #004494; | ||
| } | ||
| #demo { | ||
| margin-top: 20px; | ||
| font-size: 1.2em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Welcome to StaySeeker Hotel Bot</h1> | ||
| <p> | ||
| Our StaySeeker Hotel Bot is here to help you find and book the perfect hotel room. To get started, you'll need to provide your current location. | ||
| </p> | ||
| <p> | ||
| Click the button below to get your current latitude and longitude. Please ensure you grant permission if a prompt appears to detect your location. | ||
| </p> | ||
| <button onclick="getLocation()">Get My Location</button> | ||
| <p id="demo"></p> | ||
| <p class="note"> | ||
| The coordinates will need to be entered into our bot for accurate location-based results. The bot can be accessed via the chat icon displayed at the bottom right of the page. | ||
| </p> | ||
| </div> | ||
| <script src="./lex-web-ui-loader.min.js"></script> | ||
| <script> | ||
| var loaderOpts = { | ||
| baseUrl: 'baseUrl', | ||
| shouldLoadMinDeps: true | ||
| }; | ||
| var loader = new ChatBotUiLoader.IframeLoader(loaderOpts); | ||
| var chatbotUiConfig = { | ||
| /* Example of setting session attributes on parent page | ||
| lex: { | ||
| sessionAttributes: { | ||
| userAgent: navigator.userAgent, | ||
| QNAClientFilter: '' | ||
| } | ||
| } | ||
| */ | ||
| }; | ||
| loader.load(chatbotUiConfig) | ||
| .catch(function (error) { console.error(error); }); | ||
| </script> | ||
|
|
||
| <script> | ||
| const x = document.getElementById("demo"); | ||
|
|
||
| function getLocation() { | ||
| if (navigator.geolocation) { | ||
| navigator.geolocation.getCurrentPosition(showPosition, showError); | ||
| } else { | ||
| x.innerHTML = "Geolocation is not supported by this browser."; | ||
| } | ||
| } | ||
|
|
||
| function showPosition(position) { | ||
| x.innerHTML = "Latitude: <strong>" + position.coords.latitude + "</strong>" + | ||
| "<br>Longitude: <strong>" + position.coords.longitude + "</strong>"; | ||
| } | ||
|
|
||
| function showError(error) { | ||
| switch(error.code) { | ||
| case error.PERMISSION_DENIED: | ||
| x.innerHTML = "User denied the request for Geolocation."; | ||
| break; | ||
| case error.POSITION_UNAVAILABLE: | ||
| x.innerHTML = "Location information is unavailable."; | ||
| break; | ||
| case error.TIMEOUT: | ||
| x.innerHTML = "The request to get user location timed out."; | ||
| break; | ||
| case error.UNKNOWN_ERROR: | ||
| x.innerHTML = "An unknown error occurred."; | ||
| break; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |