From 5375a3139803483c1d0ed670ca91382ec990c19b Mon Sep 17 00:00:00 2001
From: Mehtarishita <rishitamehta298@gmail.com>
Date: Mon, 21 Oct 2024 18:24:06 +0530
Subject: [PATCH 1/2] added preloader

---
 frontend/index.html | 443 ++++++++++++++++++++------------------------
 1 file changed, 199 insertions(+), 244 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 1646f9e..4bc38d8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,6 +1,5 @@
 <!doctype html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./src/assets/stationsaarthi.svg" />
@@ -10,203 +9,193 @@
     src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
     onerror="handleError(this)"
 ></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 */
-        .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) {
+    <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 */
             .circle {
-                display: none;
+                height: 24px;
+                width: 24px;
+                border-radius: 24px;
+                background-color: black;
+                position: fixed;
+                top: 0;
+                left: 0;
+                pointer-events: none;
+                z-index: 99999999;
+                
             }
-        }
-
 
-        .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;
-        }
+            @media (max-width : 768px) {
+                .circle{
+                    display: none;
+                }
+            }
+    
+    
+    .chatbot-container {
+        position: relative;
+        bottom: 20px;
+        right: 20px;
+        z-index: 100;
+    }
 
-        /* Google Translate Modal */
-        #google_translate_modal {
-            display: none;
-            /* Hidden by default */
+    #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 */
+}
+
+#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 */
+}
+
+
+    .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;
             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;
+            z-index: -1;
+            /* This ensures the canvas is behind other content */
         }
 
-        /* Modal Content */
-        .modal-content {
-            background-color: #3b82f6;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
+        .content {
             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;
+            z-index: 1;
+            /* This ensures the content is in front of the canvas */
+            padding: 20px;
         }
 
-        .chatbox button {
-            background-color: #04aa6d;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            margin-top: 10px;
-            cursor: pointer;
-            width: 100%;
-            border-radius: 5px;
+        #bgCanvas {
+            filter: blur(5px);
+            /* Adjust the value to control the blur strength */
         }
+        #loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  background: white url('./src/assets/stationsaarthi.svg') no-repeat center center;
+  z-index: 100;
+}
+.content{
+    padding: 0px;
+}
+#loader h3{
+    text-align: center;
+    font-size: xx-large;
+    top: 65%;
+    position: relative;
+    color: black;
+    font-weight: 700;
+    
+    
+}
 
-        .chatbox button:hover {
-            background-color: #028a57;
-        }
+#loader  {
+    animation: fadeInOutAnimation ease 2.5s infinite;
+}
 
-        .chat-output {
-            margin-top: 10px;
-            padding: 5px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-    </style>
+@keyframes fadeInOutAnimation {
+    0%, 100% { 
+        opacity: 0;
+    }
+    50% { 
+        opacity: 1;
+    }
+}
+</style>    
 </head>
+<body class="load">
+    <div id="loader"><h3 >Station Saarthi - Your Platform Guide </h3></div>
 
-<body>
+    <canvas id="bgCanvas"> </canvas>
+    <div class="content">
+       
+    
     <!-- Circles -->
     <div class="circle"></div>
     <div class="circle"></div>
@@ -228,9 +217,6 @@
     <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" />
@@ -241,7 +227,7 @@ <h3>Saarthi</h3>
         <textarea id="chatInput" rows="4" placeholder="Type your message..."></textarea>
         <button id="sendMessage">Send</button>
     </div> -->
-    <!-- 
+<!-- 
     <script>
         // Variable to track if the welcome message has been displayed
         let welcomeMessageDisplayed = false;
@@ -339,60 +325,30 @@ <h3>Saarthi</h3>
 
     </script> -->
 
-    <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">
-        function googleTranslateElementInit() {
-            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
-        }
-    </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
-                });
-            }
+        window.addEventListener("load", () => {
+            const loader = document.getElementById("loader");
+            loader.style.display = "none";
+        })
+    </script>
+   
+    
+    <div id="google_translate_element"></div>
 
-            // Hide modal when clicking outside the modal content
-            window.addEventListener('click', (event) => {
-                if (event.target == modal) {
-                    modal.style.display = 'none'; // Hide modal
-                }
-            });
-        });
+    <script type="text/javascript">
+    function googleTranslateElementInit() {
+      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
+    }
     </script>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-    <script>
+    
+    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+     <div id="root"></div>
+     <script type="module" src="/src/main.jsx"></script>
+     <script>
         // Coordinates for the cursor
         const coords = { x: 0, y: 0 };
         const circles = document.querySelectorAll(".circle");
-
+    
         // Colors for the circles
         const colors = [
             "#6bb5ff", "#69b1fd", "#63a3f8", "#619bf5", "#5e89ef", "#5d82ec",
@@ -400,7 +356,7 @@ <h3>Saarthi</h3>
             "#5e2cb2", "#5e26ac", "#5f159c", "#5f0f95", "#600083", "#60007c",
             "#600068", "#5f0060", "#5f0048", "#5e003d"
         ];
-
+    
         // Assign colors, initial position, and size to each circle
         circles.forEach(function (circle, index) {
             circle.x = 0;
@@ -412,51 +368,50 @@ <h3>Saarthi</h3>
             circle.style.height = `${5 + (index * 2)}px`;
             circle.style.opacity = `${(circles.length - index) / circles.length}`;  // Fading effect
         });
-
+    
         // Update the coordinates when the mouse moves
         window.addEventListener("mousemove", function (e) {
             coords.x = e.clientX;
             coords.y = e.clientY;
         });
-
+    
         // Easing function to make the animation smoother
         function lerp(start, end, t) {
             return start * (1 - t) + end * t;
         }
-
+    
         // Animation function to move the circles with a trailing effect
         function animateCircles() {
             let x = coords.x;
             let y = coords.y;
-
+    
             circles.forEach(function (circle, index) {
                 const nextCircle = circles[index + 1] || circles[0];
-
+                
                 // Apply easing for smoother movements
                 circle.x = lerp(circle.x, x, 0.4);  // Adjusted for quicker reaction
                 circle.y = lerp(circle.y, y, 0.4);
-
+    
                 // Positioning the circle closer to the cursor
                 circle.style.left = circle.x - circle.offsetWidth / 2 + "px";
                 circle.style.top = circle.y - circle.offsetHeight / 2 + "px";
-
+                
                 // Scale down each circle progressively to create depth
                 circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
-
+    
                 // Update position for the next circle, adjusted for closer proximity
                 x += (nextCircle.x - x) * 0.2;  // Smaller multiplier for tighter following
                 y += (nextCircle.y - y) * 0.2;
             });
-
+    
             // Repeat the animation
             requestAnimationFrame(animateCircles);
         }
-
+    
         // Start the animation
         animateCircles();
     </script>
-
-
+    </div>
+    
 </body>
-
 </html>
\ No newline at end of file

From 8e797cb03a1e0fca2e944c2351c62d44ee948c6f Mon Sep 17 00:00:00 2001
From: Mehtarishita <rishitamehta298@gmail.com>
Date: Mon, 21 Oct 2024 18:32:29 +0530
Subject: [PATCH 2/2] Update index.html

---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 4bc38d8..e889677 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -158,7 +158,7 @@
   left: 0;
   height: 100vh;
   width: 100%;
-  background: white url('./src/assets/stationsaarthi.svg') no-repeat center center;
+  background: rgb(191 219 254) url('./src/assets/stationsaarthi.svg') no-repeat center center;
   z-index: 100;
 }
 .content{
