Skip to content

Commit

Permalink
Merge pull request #367 from RiddhiM170904/main
Browse files Browse the repository at this point in the history 
backicon and routes updated
  • Loading branch information
@dhairyagothi
dhairyagothi authored Oct 21, 2024
2 parents 7a88618 + c559deb commit 28caa2a
Show file tree
Hide file tree
Showing 10 changed files with 288 additions and 135 deletions.
351 changes: 231 additions & 120 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,126 +11,196 @@
></script> -->

<title>Station Saarthi</title>
<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>
/* Style for the Google Translate element */
#google_element {
position: absolute;
top: 10px; /* Distance from the top */
/* Position between middle and left corner */
margin: 40px;
transform: translateX(-20%); /* Adjust for half the element's width */
/* Ensure it stays on top */
}
/* Circle styles */
<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>
/* Style for the Google Translate element */
#google_element {
position: absolute;
top: 10px;
/* Distance from the top */
/* Position between middle and left corner */
margin: 40px;
transform: translateX(-20%);
/* Adjust for half the element's width */
/* Ensure it stays on top */
}

/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;

}

@media (max-width : 768px) {
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;

display: none;
}
}

@media (max-width : 768px) {
.circle{
display: none;
}
}


.chatbot-container {
position: relative;
bottom: 20px;
right: 20px;
z-index: 100;
}

#google_translate_element {
position: absolute;
/* top: 20px; Space from the top */
left: 20px; /* Space from the right */
top: 60px;
background-color: #3b82f6;
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 */
z-index: 15; /* Ensures it stays on top */
transition: transform 0.3s ease-in-out;
/* Smooth animation on hover */
}
.chatbot-container {
position: relative;
bottom: 20px;
right: 20px;
z-index: 100;
}

#google_translate_element:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}
/* 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;
}

.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;
}
/* 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;
}
#bgCanvas {
position: fixed;
top: 0;
Expand Down Expand Up @@ -217,6 +287,9 @@
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div id="languageIcon" title="Change Language">
🌐 <!-- This is the icon for language, you can replace this with any icon (SVG, FontAwesome, etc.) -->
</div>
<!-- <div class="chatbot-container"></div>
<div class="chatbot" id="chatbotIcon">
<img src="https://cdn-icons-png.flaticon.com/512/8943/8943377.png" alt="Chatbot Icon" />
Expand Down Expand Up @@ -332,16 +405,54 @@ <h3>Saarthi</h3>
})
</script>


<div id="google_translate_element"></div>

<div id="google_translate_modal" class="flex">
<div class="modal-content">
<!-- Close Button -->
<button class="close-btn" id="closeBtn">✖</button>

<!-- Google Translate Widget -->
<div id="google_translate_element"></div>
</div>
</div>

<script type="text/javascript">
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</script>
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- JavaScript for toggling modal -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const languageIcon = document.getElementById('languageIcon');
const modal = document.getElementById('google_translate_modal');
const closeBtn = document.getElementById('closeBtn');

if (languageIcon) {
// Show modal when the language icon is clicked
languageIcon.addEventListener('click', () => {
modal.style.display = 'flex'; // Show modal
});
}

if (closeBtn) {
// Hide modal when the close button is clicked
closeBtn.addEventListener('click', () => {
modal.style.display = 'none'; // Hide modal
});
}

// Hide modal when clicking outside the modal content
window.addEventListener('click', (event) => {
if (event.target == modal) {
modal.style.display = 'none'; // Hide modal
}
});
});
</script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script>
Expand Down
Loading

0 comments on commit 28caa2a

Please sign in to comment.