diff --git a/frontend/index.html b/frontend/index.html index d5e63b6..1646f9e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,6 @@ + @@ -10,128 +11,201 @@ onerror="handleError(this)" > --> Station Saarthi - + .chatbot-container { + position: relative; + bottom: 20px; + right: 20px; + z-index: 100; + } + + /* Default styles for larger screens */ + #languageIcon { + position: fixed; + top: 70px; + /* Adjust based on your navbar height */ + left: 20px; + background-color: #3b82f6; + color: white; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 999; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s ease-in-out; + } + + #languageIcon:hover { + background-color: #2563eb; + } + + /* Google Translate Modal */ + #google_translate_modal { + display: none; + /* Hidden by default */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + /* Semi-transparent background */ + justify-content: center; + align-items: center; + + z-index: 1000; + } + + /* Modal Content */ + .modal-content { + background-color: #3b82f6; + padding: 20px; + border-radius: 8px; + box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); + position: relative; + width: 80%; + + max-width: 500px; + padding: 10px 15px; + /* Padding for better spacing inside the button */ + border-radius: 8px; + /* Rounded corners */ + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + /* Soft shadow for a 3D effect */ + color: #fff; + /* Text color */ + font-family: 'Arial', sans-serif; + /* Custom font for better readability */ + font-size: 14px; + /* Adjust font size */ + cursor: pointer; + /* Pointer for clickable look */ + } + + /* Close Button */ + .close-btn { + position: absolute; + top: 10px; + right: 10px; + background-color: #f87171; + color: white; + border: none; + border-radius: 50%; + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1001; + } + + /* Google Translate Element Styling */ + #google_translate_element { + margin-top: 20px; + text-align: center; + } + + .chatbot { + position: fixed; + bottom: 0px; + right: 0px; + z-index: 50; + margin: 20px; + background-color: #04aa6d; + border-radius: 50px; + width: 60px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + .chatbox { + display: none; + position: fixed; + bottom: 90px; + right: 20px; + width: 300px; + background-color: #f9f9f9; + border: 2px solid #04aa6d; + border-radius: 10px; + padding: 10px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + } + + .chatbox textarea { + width: 100%; + padding: 10px; + margin-top: 10px; + border-radius: 5px; + border: 1px solid #ccc; + } + + .chatbox button { + background-color: #04aa6d; + color: white; + border: none; + padding: 10px 20px; + margin-top: 10px; + cursor: pointer; + width: 100%; + border-radius: 5px; + } + + .chatbox button:hover { + background-color: #028a57; + } + + .chat-output { + margin-top: 10px; + padding: 5px; + border: 1px solid #ccc; + border-radius: 5px; + } + +
@@ -154,6 +228,9 @@
+
+ 🌐 +
- - -
+ +
+
+ + + + +
+
+
- - -
- - + + + +
+ + - - + + + \ No newline at end of file diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx index 931b84b..f20a690 100644 --- a/frontend/src/Pages/booking.jsx +++ b/frontend/src/Pages/booking.jsx @@ -26,7 +26,7 @@ const BookingPage = () => { // Fetch station suggestions const fetchStationSuggestions = async (query) => { try { - const response = await axios.get(`http://localhost:3000/station/`,`https://stationguidebackend.onrender.com`); + const response = await axios.get(`http://localhost:3000/station/`, `https://stationguidebackend.onrender.com`); if (response.data.length > 0) { setStationSuggestions(response.data); setNoResults(false); @@ -45,7 +45,7 @@ const BookingPage = () => { try { setLoading(true); const response = await axios.get( - `http://localhost:3000/station/${stationId}/bookings` , `https://stationguidebackend.onrender.com` + `http://localhost:3000/station/${stationId}/bookings`, `https://stationguidebackend.onrender.com` ); const { coolieBookings, wheelchairBookings, cloakroomBookings } = response.data; @@ -121,12 +121,12 @@ const BookingPage = () => { price: 100, }; - await axios.post(`http://localhost:3000/api/bookCloakroom`,`https://stationguidebackend.onrender.com`, requestBody); + await axios.post(`http://localhost:3000/api/bookCloakroom`, `https://stationguidebackend.onrender.com`, requestBody); alert("Cloakroom booking successful!"); } catch (error) { alert( "Failed to complete the booking: " + - (error.response?.data?.message || "Unknown error") + (error.response?.data?.message || "Unknown error") ); } }; @@ -142,12 +142,12 @@ const BookingPage = () => { price: 250, }; - await axios.post(`http://localhost:3000/api/bookCoolie`,`https://stationguidebackend.onrender.com`, requestBody); + await axios.post(`http://localhost:3000/api/bookCoolie`, `https://stationguidebackend.onrender.com`, requestBody); alert("Coolie booking successful!"); } catch (error) { alert( "Failed to complete the booking: " + - (error.response?.data?.message || "Unknown error") + (error.response?.data?.message || "Unknown error") ); } }; @@ -161,12 +161,12 @@ const BookingPage = () => { price: 200, }; - await axios.post(`http://localhost:3000/api/bookWheelchair`,`https://stationguidebackend.onrender.com`, requestBody); + await axios.post(`http://localhost:3000/api/bookWheelchair`, `https://stationguidebackend.onrender.com`, requestBody); alert("Wheelchair booking successful!"); } catch (error) { alert( "Failed to complete the booking: " + - (error.response?.data?.message || "Unknown error") + (error.response?.data?.message || "Unknown error") ); } }; @@ -328,43 +328,48 @@ const BookingPage = () => { }; return ( -
- -

Booking Page

+
+ +
+ -
- - - {noResults &&

No results found.

} +

Booking Page

+ +
{/* Setting width to 60% */} + + + {noResults &&

No results found.

} +
+ + {stationSuggestions.length > 0 && ( +
    + {stationSuggestions.map((suggestion) => ( +
  • handleStationSelect(suggestion)} + className="p-3 transition duration-150 cursor-pointer hover:bg-gray-100" + > + {suggestion.name} +
    • + ))} +
+ )}
- {stationSuggestions.length > 0 && ( -
    - {stationSuggestions.map((suggestion) => ( -
  • handleStationSelect(suggestion)} - className="p-3 transition duration-150 cursor-pointer hover:bg-gray-100" - > - {suggestion.name} -
    • - ))} -
- )} {loading &&

Loading services...

}