AditixAnand · saurabhhhcodes · Jun 22, 2026 · Jul 12, 2026
diff --git a/Styles/auth.css b/Styles/auth.css
@@ -115,6 +115,38 @@
     margin-top: 0.25rem;
 }
 
+/* Password Visibility Toggle */
+.password-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-wrapper input {
+    width: 100%;
+    padding-right: 2.5rem;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text);
+    padding: 0.25rem;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.password-toggle:hover {
+    opacity: 1;
+}
+
 /* Responsive Design */
 @media (max-width: 480px) {
     .auth-card {

diff --git a/Styles/main.css b/Styles/main.css
@@ -1138,6 +1138,40 @@ ul li i.fa-check {
     color: var(--light-text);
 }
 
+/* Scroll to Top Button */
+#scrollToTop {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 44px;
+    height: 44px;
+    background: var(--secondary-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
+    z-index: 999;
+}
+
+#scrollToTop.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+#scrollToTop:hover {
+    background: var(--primary-color);
+}
+
 /* Responsive Modal */
 @media (max-width: 768px) {
     .modal-content {

diff --git a/admin.html b/admin.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>EduBridge Admin Dashboard</title>
+  <title>EduBridge | Admin</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
@@ -317,8 +317,24 @@ <h3>Follow Us</h3>
 
   <div class="toast-container" id="toastContainer" aria-live="polite" aria-atomic="true"></div>
 
+  <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
+
   <script src="scripts/content-data.js"></script>
   <script src="scripts/quiz-data.js"></script>
   <script src="scripts/admin.js"></script>
+  <script>
+    // Scroll to Top
+    const scrollBtn = document.getElementById('scrollToTop');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 300) {
+        scrollBtn.classList.add('visible');
+      } else {
+        scrollBtn.classList.remove('visible');
+      }
+    });
+    scrollBtn.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  </script>
 </body>
 </html>
diff --git a/ai.html b/ai.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI & Machine Learning - EduBridge</title>
+    <title>EduBridge | AI Assistant</title>
     <!-- CSS Dependencies -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -474,6 +474,21 @@ <h3>Follow Us</h3>
                 closeVideo();
             }
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
diff --git a/backend/app b/backend/app
@@ -1,8 +1,9 @@
+import os
 from flask import Flask, request, jsonify
 import openai
 
-# Set up your OpenAI API key
-openai.api_key = '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'
+# Set up your OpenAI API key using environment variable
+openai.api_key = os.getenv('OPENAI_API_KEY')
 
 app = Flask(__name__)
 

diff --git a/career.html b/career.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Career Guidance - EduBridge</title>
+    <title>EduBridge | Career Guidance</title>
     <!-- CSS Dependencies -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -516,6 +516,21 @@ <h3>Follow Us</h3>
                 closeVideo();
             }
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
diff --git a/forgot-password.html b/forgot-password.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduBridge | Forgot Password</title>
+    <link rel="stylesheet" href="Styles/main.css">
+    <link rel="stylesheet" href="Styles/auth.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <a href="index.html" class="logo">EduBridge</a>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="webdev.html">Web Development</a></li>
+                <li><a href="ai.html">AI & ML</a></li>
+                <li><a href="career.html">Career</a></li>
+                <li>
+                    <div class="theme-selector" id="themeSelector">
+                        <button class="theme-selector-btn" id="themeButton">
+                            <i class="fas fa-palette"></i>
+                            Theme
+                        </button>
+                        <div class="theme-selector-dropdown">
+                            <div class="theme-option" data-theme="light">
+                                <i class="fas fa-sun"></i>
+                                Light Mode
+                            </div>
+                            <div class="theme-option" data-theme="dark">
+                                <i class="fas fa-moon"></i>
+                                Dark Mode
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </header>
+
+    <main class="auth-container">
+        <div class="auth-card">
+            <h2>Forgot Password</h2>
+            <p style="text-align:center;margin-bottom:1.5rem;color:var(--text);">Enter your registered email address and we'll send you a link to reset your password.</p>
+            <form id="forgotPasswordForm" class="auth-form">
+                <div class="form-group">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                <button type="submit" class="auth-button">Send Reset Link</button>
+            </form>
+            <div class="auth-links">
+                <p><a href="login.html">Back to Login</a></p>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>About Us</h3>
+                <p>EduBridge is dedicated to providing quality education in technology fields.</p>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="webdev.html">Web Development</a></li>
+                    <li><a href="ai.html">AI & ML</a></li>
+                    <li><a href="career.html">Career</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Follow Us</h3>
+                <a href="https://x.com/shivam98997467" target="_blank" class="social-button" title="Follow us on Twitter">
+                    <i class="fab fa-twitter"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        const themeSelector = document.getElementById('themeSelector');
+        const themeButton = document.getElementById('themeButton');
+        const themeOptions = document.querySelectorAll('.theme-option');
+        const currentTheme = localStorage.getItem('theme') || 'light';
+
+        document.documentElement.setAttribute('data-theme', currentTheme);
+        updateActiveThemeOption(currentTheme);
+
+        themeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            themeSelector.classList.toggle('active');
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!themeSelector.contains(e.target)) {
+                themeSelector.classList.remove('active');
+            }
+        });
+
+        themeOptions.forEach(option => {
+            option.addEventListener('click', () => {
+                const theme = option.getAttribute('data-theme');
+                document.documentElement.setAttribute('data-theme', theme);
+                localStorage.setItem('theme', theme);
+                updateActiveThemeOption(theme);
+                themeSelector.classList.remove('active');
+            });
+        });
+
+        function updateActiveThemeOption(theme) {
+            themeOptions.forEach(option => {
+                if (option.getAttribute('data-theme') === theme) {
+                    option.classList.add('active');
+                } else {
+                    option.classList.remove('active');
+                }
+            });
+        }
+
+        document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = this.email.value;
+            const btn = this.querySelector('.auth-button');
+            btn.textContent = 'Sending...';
+            btn.disabled = true;
+            setTimeout(() => {
+                btn.textContent = 'Send Reset Link';
+                btn.disabled = false;
+                const existing = this.querySelector('.success-message, .error-message');
+                if (existing) existing.remove();
+                const msg = document.createElement('div');
+                msg.className = 'success-message';
+                msg.textContent = 'If an account with that email exists, a reset link has been sent.';
+                msg.style.cssText = 'text-align:center;margin-top:1rem;color:#28a745;';
+                this.appendChild(msg);
+            }, 1500);
+        });
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>EduBridge - Learn Tech Skills</title>
+  <title>EduBridge | Home</title>
   <!-- CSS Dependencies -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
   <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -243,7 +243,24 @@ <h3>Follow Us</h3>
 
     // Load chatbot when the page is ready
     document.addEventListener('DOMContentLoaded', loadChatbot);
+
+    // Scroll to Top
+    const scrollBtn = document.getElementById('scrollToTop');
+    if (scrollBtn) {
+      window.addEventListener('scroll', () => {
+        if (window.scrollY > 300) {
+          scrollBtn.classList.add('visible');
+        } else {
+          scrollBtn.classList.remove('visible');
+        }
+      });
+      scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+    }
   </script>
+
+  <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html>