From c559debd5b77e919a97f6fdfb83735f5ea87cbe9 Mon Sep 17 00:00:00 2001
From: Riddhi Mhadgut <riddhimhadgut17@gmail.com>
Date: Mon, 21 Oct 2024 16:01:32 +0000
Subject: [PATCH] backicon

---
 frontend/index.html                   | 351 +++++++++++++++++---------
 frontend/src/Pages/3Dmaps.jsx         |  20 +-
 frontend/src/Pages/Emergency.jsx      |   4 +-
 frontend/src/Pages/HelpandSupport.jsx |  12 +
 frontend/src/Pages/LoginPage.jsx      |   4 +-
 frontend/src/Pages/Payment.jsx        |  12 +
 frontend/src/Pages/Register.jsx       |   6 +-
 frontend/src/Pages/stations.jsx       |   6 +-
 frontend/src/components/Settings.jsx  |   4 +-
 frontend/src/components/about.jsx     |   4 +-
 10 files changed, 288 insertions(+), 135 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e889677..a6830a5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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;
@@ -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" />
@@ -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>
diff --git a/frontend/src/Pages/3Dmaps.jsx b/frontend/src/Pages/3Dmaps.jsx
index 1be0768..af08239 100644
--- a/frontend/src/Pages/3Dmaps.jsx
+++ b/frontend/src/Pages/3Dmaps.jsx
@@ -1,11 +1,29 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg';
+
+
 
 const DMapPage = () => {
   useEffect(() => {
     document.title = 'Station Saarthi | 3D Map'; 
   }, []);
+  const navigate = useNavigate();
+
+
+const HomeClick = () => {   
+        navigate('/'); // Navigates to the home page
+    };
   return (
-    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>Making in Progress</div>
+    <>
+     <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
+    <div className='h-full w-full text-6xl text-center font-bold justify-between p-44 text-white'>
+      
+      Making in Progress</div>
+
+      </>
   )
 } 
 
diff --git a/frontend/src/Pages/Emergency.jsx b/frontend/src/Pages/Emergency.jsx
index d1b8e80..ef07bd5 100644
--- a/frontend/src/Pages/Emergency.jsx
+++ b/frontend/src/Pages/Emergency.jsx
@@ -10,8 +10,8 @@ const HomeClick = () => {
     };
   return (
     <>
-     <button onClick={HomeClick} className='absolute top-0 left-0'>
-                <img src={backicon} alt="" className='h-[9vh]' />
+     <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
             </button>
     <div className="flex items-center justify-center min-h-screen bg-blue-100">
       <h1 className="text-3xl font-semibold text-blue-900">Emergency Page</h1>
diff --git a/frontend/src/Pages/HelpandSupport.jsx b/frontend/src/Pages/HelpandSupport.jsx
index 24c1a12..4105fa2 100644
--- a/frontend/src/Pages/HelpandSupport.jsx
+++ b/frontend/src/Pages/HelpandSupport.jsx
@@ -1,4 +1,8 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg';
+
+
 
 const SearchIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -120,9 +124,17 @@ const HelpAndSupport = () => {
       setExpandedQuestion(index);
     }
   };
+  const navigate = useNavigate();
+
 
+  const HomeClick = () => {   
+          navigate('/'); // Navigates to the home page
+      };
   return (
     <div className="min-h-screen bg-gray-100 p-8">
+       <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
       <h1 className="text-4xl font-bold text-center text-blue-600 mb-8">Help and Support</h1>
       
       <div className="max-w-6xl mx-auto">
diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
index 9834c0b..6dfd617 100644
--- a/frontend/src/Pages/LoginPage.jsx
+++ b/frontend/src/Pages/LoginPage.jsx
@@ -56,8 +56,8 @@ const Login = () => {
     return ( 
         <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */} 
-            <button onClick={HomeClick} className='absolute left-0 top-0'>
-                <img src={backicon} alt="" className='h-[9vh]' />
+            <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
             </button>
             <div className="mb-10 text-center">
                 <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto h-22" />
diff --git a/frontend/src/Pages/Payment.jsx b/frontend/src/Pages/Payment.jsx
index 15724ef..709ce12 100644
--- a/frontend/src/Pages/Payment.jsx
+++ b/frontend/src/Pages/Payment.jsx
@@ -1,4 +1,8 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import backicon from '../assets/svg/backicon.svg';
+
+
 
 const Payment = () => {
   const [paymentMethod, setPaymentMethod] = useState('');
@@ -10,10 +14,18 @@ const Payment = () => {
     e.preventDefault();
     console.log('Payment submitted:', { paymentMethod, cardNumber, expiryDate, cvv });
   };
+  const navigate = useNavigate();
+
 
+  const HomeClick = () => {   
+          navigate('/'); // Navigates to the home page
+      };
   return (
 
     <div className="min-h-screen flex justify-center items-center bg-blue-100">
+       <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
       <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
         <h1 className="text-3xl font-semibold text-blue-900 mb-6">Payment Page</h1>
         <form onSubmit={handleSubmit}>
diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx
index 824f1e9..50c0f41 100644
--- a/frontend/src/Pages/Register.jsx
+++ b/frontend/src/Pages/Register.jsx
@@ -175,9 +175,9 @@ const Register = () => {
           </div>
         )}
 
-        <button onClick={HomeClick} className="absolute top-0 left-0">
-          <img src={backicon} alt="" className="h-[9vh]" />
-        </button>
+<button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
         <div className="mb-6 text-center">
           <img
             src={logo}
diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx
index e796445..c194f35 100644
--- a/frontend/src/Pages/stations.jsx
+++ b/frontend/src/Pages/stations.jsx
@@ -108,9 +108,9 @@ const RailwayStations = () => {
     <div className="min-h-screen p-4 bg-gray-100">
       {/* Header Section */}
       <div>
-        <button onClick={HomeClick}>
-          <img src={backicon} alt="" className="fixed left-[1vh] h-[9vh] w-auto" />
-        </button>
+      <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
+            </button>
       </div>
   
       <div className="flex flex-col items-center mb-8">
diff --git a/frontend/src/components/Settings.jsx b/frontend/src/components/Settings.jsx
index 6804a6f..8a9232f 100644
--- a/frontend/src/components/Settings.jsx
+++ b/frontend/src/components/Settings.jsx
@@ -10,8 +10,8 @@ const HomeClick = () => {
     };
   return (
     <>
-     <button onClick={HomeClick} className='absolute top-0 left-0'>
-                <img src={backicon} alt="" className='h-[9vh]' />
+      <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
             </button>
     <div className="flex items-center justify-center min-h-screen bg-blue-100">
       <h1 className="text-3xl font-semibold text-blue-900">Settings Page</h1>
diff --git a/frontend/src/components/about.jsx b/frontend/src/components/about.jsx
index b51602e..5418625 100644
--- a/frontend/src/components/about.jsx
+++ b/frontend/src/components/about.jsx
@@ -16,8 +16,8 @@ const HomeClick = () => {
 
   return (
     <div className="about-container">
-       <button onClick={HomeClick} className='absolute top-0 left-0'>
-                <img src={backicon} alt="" className='h-[9vh]' />
+        <button onClick={HomeClick} className='absolute left-0 top-2'>
+                <img src={backicon} alt="" className='h-[5vh]' />
             </button>
       <h1>ABOUT US</h1>
       <p>