Skip to content

Commit 08eaf31

Browse files
nihalkrenainihalkrenai
committed
2 parents 34be9b6 + 8d2cfb7 commit 08eaf31

File tree

19 files changed

+332
-375
lines changed

19 files changed

+332
-375
lines changed

‎frontend/index.html

Lines changed: 23 additions & 354 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,28 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="./src/assets/stationsaarthi.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<!-- <script
8-
type="text/javascript"
9-
src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
10-
onerror="handleError(this)"
11-
></script> -->
7+
<title>Station Saarthi</title>
8+
<style>
9+
/* Style for the Google Translate element */
10+
#google_element {
11+
position: absolute;
12+
top: 10px; /* Distance from the top */
13+
left: 25%; /* Position between middle and left corner */
14+
transform: translateX(-50%); /* Adjust for half the element's width */
15+
z-index: 1000; /* Ensure it stays on top */
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
22+
<div id="google_element"></div>
23+
<!-- Load Google Translate script over HTTPS and handle errors -->
24+
<script
25+
type="text/javascript"
26+
src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
27+
onerror="handleError(this)"
28+
></script>
1229

1330
<title>Station Saarthi</title>
1431
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <style>
@@ -24,244 +41,6 @@
2441
/* Ensure it stays on top */
2542
}
2643

27-
/* Circle styles */
28-
.circle {
29-
height: 24px;
30-
width: 24px;
31-
border-radius: 24px;
32-
background-color: black;
33-
position: relative;
34-
top: 0;
35-
left: 0;
36-
37-
pointer-events: none;
38-
z-index: 99999999;
39-
40-
}
41-
42-
@media (max-width : 768px) {
43-
.circle {
44-
display: none;
45-
}
46-
}
47-
48-
49-
.chatbot-container {
50-
position: relative;
51-
bottom: 20px;
52-
right: 20px;
53-
z-index: 100;
54-
}
55-
56-
/* Default styles for larger screens */
57-
#languageIcon {
58-
position: fixed;
59-
top: 70px;
60-
/* Adjust based on your navbar height */
61-
left: 20px;
62-
--tw-bg-opacity: 1;
63-
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
64-
65-
color: white;
66-
border-radius: 50%;
67-
width: 50px;
68-
height: 50px;
69-
display: flex;
70-
justify-content: center;
71-
align-items: center;
72-
cursor: pointer;
73-
z-index: 999;
74-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
75-
transition: background-color 0.3s ease-in-out;
76-
}
77-
78-
#languageIcon:hover {
79-
background-color: #2563eb;
80-
}
81-
82-
/* Google Translate Modal */
83-
#google_translate_modal {
84-
display: none;
85-
/* Hidden by default */
86-
position: fixed;
87-
top: 0;
88-
left: 0;
89-
width: 100%;
90-
height: 100%;
91-
background-color: rgba(0, 0, 0, 0.5);
92-
/* Semi-transparent background */
93-
justify-content: center;
94-
align-items: center;
95-
96-
z-index: 1000;
97-
}
98-
99-
/* Modal Content */
100-
.modal-content {
101-
background-color: #4d90fe;
102-
padding: 20px;
103-
border-radius: 8px;
104-
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
105-
position: relative;
106-
width: 80%;
107-
108-
max-width: 500px;
109-
padding: 10px 15px;
110-
/* Padding for better spacing inside the button */
111-
border-radius: 8px;
112-
/* Rounded corners */
113-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
114-
/* Soft shadow for a 3D effect */
115-
color: #fff;
116-
/* Text color */
117-
font-family: 'Arial', sans-serif;
118-
/* Custom font for better readability */
119-
font-size: 14px;
120-
/* Adjust font size */
121-
cursor: pointer;
122-
/* Pointer for clickable look */
123-
}
124-
125-
/* Close Button */
126-
/* .close-btn {
127-
position: absolute;
128-
top: 10px;
129-
right: 10px;
130-
background-color: #ff0909;
131-
color: white;
132-
border: none;
133-
border-radius: 50%;
134-
width: 30px;
135-
height: 30px;
136-
display: flex;
137-
justify-content: center;
138-
align-items: center;
139-
cursor: pointer;
140-
z-index: 1001;
141-
} */
142-
143-
/* Google Translate Element Styling
144-
#google_translate_element {
145-
margin-top: 20px;
146-
text-align: center;
147-
} */
148-
149-
.chatbot {
150-
position: fixed;
151-
bottom: 0px;
152-
right: 0px;
153-
z-index: 50;
154-
margin: 20px;
155-
background-color: #04aa6d;
156-
border-radius: 50px;
157-
width: 60px;
158-
height: 60px;
159-
display: flex;
160-
justify-content: center;
161-
align-items: center;
162-
cursor: pointer;
163-
}
164-
165-
.chatbox {
166-
display: none;
167-
position: fixed;
168-
bottom: 90px;
169-
right: 20px;
170-
width: 300px;
171-
background-color: #f9f9f9;
172-
border: 2px solid #04aa6d;
173-
border-radius: 10px;
174-
padding: 10px;
175-
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
176-
}
177-
178-
.chatbox textarea {
179-
width: 100%;
180-
padding: 10px;
181-
margin-top: 10px;
182-
border-radius: 5px;
183-
border: 1px solid #ccc;
184-
}
185-
186-
.chatbox button {
187-
background-color: #04aa6d;
188-
color: white;
189-
border: none;
190-
padding: 10px 20px;
191-
margin-top: 10px;
192-
cursor: pointer;
193-
width: 100%;
194-
border-radius: 5px;
195-
}
196-
197-
.chatbox button:hover {
198-
background-color: #028a57;
199-
}
200-
201-
.chat-output {
202-
margin-top: 10px;
203-
padding: 5px;
204-
border: 1px solid #ccc;
205-
border-radius: 5px;
206-
}
207-
#bgCanvas {
208-
position: fixed;
209-
top: 0;
210-
left: 0;
211-
width: 100%;
212-
height: 100%;
213-
z-index: -1;
214-
/* This ensures the canvas is behind other content */
215-
}
216-
217-
.content {
218-
position: relative;
219-
z-index: 1;
220-
/* This ensures the content is in front of the canvas */
221-
padding: 20px;
222-
}
223-
224-
#bgCanvas {
225-
filter: blur(5px);
226-
/* Adjust the value to control the blur strength */
227-
}
228-
#loader {
229-
position: fixed;
230-
top: 0;
231-
left: 0;
232-
height: 100vh;
233-
width: 100%;
234-
background: rgb(191 219 254) url('./src/assets/stationsaarthi.svg') no-repeat center center;
235-
z-index: 100;
236-
}
237-
.content{
238-
padding: 0px;
239-
}
240-
#loader h3{
241-
text-align: center;
242-
font-size: xx-large;
243-
top: 65%;
244-
position: relative;
245-
color: black;
246-
font-weight: 700;
247-
248-
249-
}
250-
251-
#loader {
252-
animation: fadeInOutAnimation ease 2.5s infinite;
253-
}
254-
255-
@keyframes fadeInOutAnimation {
256-
0%, 100% {
257-
opacity: 0;
258-
}
259-
50% {
260-
opacity: 1;
261-
}
262-
263-
264-
}
26544

26645

26746

@@ -271,117 +50,7 @@
27150
<body class="load">
27251
<div id="loader"><h3 >Station Saarthi - Your Platform Guide </h3></div>
27352

274-
<canvas id="bgCanvas"> </canvas>
275-
<div class="content">
276-
277-
278-
<!-- Circles -->
279-
<div class="circle"></div>
280-
<div class="circle"></div>
281-
<div class="circle"></div>
282-
<div class="circle"></div>
283-
<div class="circle"></div>
284-
<div class="circle"></div>
285-
<div class="circle"></div>
286-
<div class="circle"></div>
287-
<div class="circle"></div>
288-
<div class="circle"></div>
289-
<div class="circle"></div>
290-
<div class="circle"></div>
291-
<div class="circle"></div>
292-
<div class="circle"></div>
293-
<div class="circle"></div>
294-
<div class="circle"></div>
295-
<div class="circle"></div>
296-
<div class="circle"></div>
297-
<div class="circle"></div>
298-
<div class="circle"></div>
299-
<!-- <div id="languageIcon" title="Change Language">
300-
🌐
301-
</div> -->
302-
<!-- <div class="chatbot-container"></div>
303-
<div class="chatbot" id="chatbotIcon">
304-
<img src="https://cdn-icons-png.flaticon.com/512/8943/8943377.png" alt="Chatbot Icon" />
305-
</div>
306-
<div class="chatbox" id="chatbox">
307-
<h3>Saarthi</h3>
308-
<div id="chatOutput" class="chat-output"></div>
309-
<textarea id="chatInput" rows="4" placeholder="Type your message..."></textarea>
310-
<button id="sendMessage">Send</button>
311-
</div> -->
312-
<!--
313-
<script>
314-
// Variable to track if the welcome message has been displayed
315-
let welcomeMessageDisplayed = false;
316-
317-
// Function to display the welcome message when chatbot opens
318-
function displayWelcomeMessage() {
319-
const chatOutput = document.getElementById('chatOutput');
320-
chatOutput.innerHTML += '<p>Hi I am saarthi your Platform Guide How can I help you today?</p>';
321-
}
322-
323-
// Toggle the chatbot window
324-
document.getElementById('chatbotIcon').addEventListener('click', function () {
325-
const chatbox = document.getElementById('chatbox');
326-
chatbox.style.display = chatbox.style.display === 'block' ? 'none' : 'block';
327-
328-
// If chatbox is opened and the welcome message has not been displayed, display it
329-
if (chatbox.style.display === 'block' && !welcomeMessageDisplayed) {
330-
displayWelcomeMessage();
331-
welcomeMessageDisplayed = true; // Set the flag to true after displaying the message
332-
}
333-
});
334-
335-
// Predefined questions and answers
336-
// Predefined questions and answers
337-
const responses = {
338-
"can you help me navigate to platform 5": "You can easily navigate to Platform 5 using Navigation in the menu. Anything else I can help you with?",
339-
"yes where can i find luggage storage facilities": "You can check the availability of cloakrooms in booking and book the same.",
340-
"hello": "Hi there! How can I help you today?",
341-
"hii": "Hello",
342-
"good morning": "Good Morning! How can I help you today?",
343-
"good evening": "Good Evening! How can I assist you?",
344-
"what is your name?": "I am Station Saarthi, your virtual assistant.",
345-
"how can I contact support?": "You can reach support at support@stationsaarthi.com.",
346-
"what services do you offer?": "We offer various services related to travel and transportation.",
347-
"help": "Please ask me a question, and I will do my best to assist you!",
348-
"what are your operating hours?": "We are open from 9 AM to 9 PM, 7 days a week.",
349-
"how do I create an account?": "You can create an account by clicking on the 'Sign Up' button on our website.",
350-
"how do I reset my password?": "To reset your password, click on 'Forgot Password' on the login page.",
351-
"what payment methods do you accept?": "We accept credit cards, debit cards, and PayPal.",
352-
"can I cancel my order?": "Yes, you can cancel your order within 24 hours of placing it.",
353-
"how can I track my order?": "You can track your order using the tracking link sent to your email.",
354-
"do you offer refunds?": "Yes, we offer refunds under certain conditions. Please check our refund policy.",
355-
"what is your refund policy?": "Our refund policy states that you can request a refund within 30 days of purchase.",
356-
"do you have a mobile app?": "Yes, we have a mobile app available for both Android and iOS.",
357-
"how can I download your app?": "You can download our app from the Google Play Store or Apple App Store.",
358-
"where are you located?": "We are located in [Your Location]. You can visit us at our office during business hours.",
359-
"how can I provide feedback?": "You can provide feedback by filling out the feedback form on our website.",
360-
"do you have a loyalty program?": "Yes, we have a loyalty program that rewards you for your continued business.",
361-
"how can I join the loyalty program?": "You can join the loyalty program by signing up on our website.",
362-
"what is your privacy policy?": "Our privacy policy outlines how we collect, use, and protect your information. You can read it on our website.",
363-
"can I change my account details?": "Yes, you can change your account details in the account settings section.",
364-
"how do I log out?": "You can log out by clicking the 'Log Out' button in your account settings.",
365-
"what should I do if I encounter a problem?": "If you encounter a problem, please contact our support team for assistance.",
366-
"do you offer group discounts?": "Yes, we offer group discounts for larger bookings. Please contact support for more information.",
367-
"how can I make a complaint?": "You can make a complaint by contacting our customer service department.",
368-
"what is your cancellation policy?": "Our cancellation policy allows you to cancel your booking with at least 24 hours' notice.",
369-
"are pets allowed?": "Yes, pets are allowed in certain services. Please check the details when booking.",
370-
"do you provide travel insurance?": "Yes, we offer travel insurance as part of our services.",
371-
"what is included in the service?": "The details of what is included in the service will be specified during the booking process.",
372-
"can I modify my booking?": "Yes, you can modify your booking by contacting our customer service.",
373-
"what happens if my flight is delayed?": "If your flight is delayed, please contact our support team for assistance.",
374-
"how do I report lost items?": "You can report lost items by contacting our customer service.",
375-
"can I change my pick-up location?": "Yes, you can change your pick-up location by contacting support.",
376-
"do you provide child seats?": "Yes, we provide child seats upon request. Please specify when booking.",
377-
"how can I view my booking history?": "You can view your booking history in your account settings.",
378-
"what do I do if I missed my appointment?": "If you missed your appointment, please contact our support team to reschedule.",
379-
"can I request a specific driver?": "Yes, you can request a specific driver when making a booking.",
380-
"what should I do if I am running late?": "If you are running late, please contact us to inform about your situation.",
381-
"do you offer last-minute bookings?": "Yes, we accept last-minute bookings depending on availability.",
382-
"what is the best way to reach you?": "The best way to reach us is through our customer support email or phone number.",
383-
"are there any hidden fees?": "No, we believe in transparency and do not have hidden fees. All costs will be clearly outlined.",
384-
};
53+
38554

38655
// Function to handle user input and match responses
38756
document.getElementById('sendMessage').addEventListener('click', function () {

0 commit comments

Comments
 (0)