From 0215b1812eadb6928cf0a2410340181024ff3e55 Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Fri, 8 Nov 2024 17:15:54 +0530
Subject: [PATCH] Added discussion forum for wordwise

---
 frontend/src/components/Navbar.js     |   1 +
 frontend/src/pages/DiscussionForum.js | 209 ++++++++++++++
 frontend/src/styles/output.css        | 127 +++++---
 frontend/src/utils/router.js          |   5 +-
 index.html                            | 401 ++++++++++++++++----------
 5 files changed, 558 insertions(+), 185 deletions(-)
 create mode 100644 frontend/src/pages/DiscussionForum.js

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index 065fc36..cfb4f2b 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -26,6 +26,7 @@ export function renderNavbar() {
                     <a href="/about" class="py-2 px-3 text-gray-900 dark:text-white">About</a>
                     <a href="/contact" class="py-2 px-3 text-gray-900 dark:text-white">Contact</a>
                     <a href="/feedback" class="py-2 px-3 text-gray-900 dark:text-white">Feedback</a>
+                    <a href="/discussion" class="py-2 px-3 text-gray-900 dark:text-white">Discussion Forum</a>
                     <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 rounded-lg text-sm p-2.5">
                         <!-- Theme Toggle Icons -->
                         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
diff --git a/frontend/src/pages/DiscussionForum.js b/frontend/src/pages/DiscussionForum.js
new file mode 100644
index 0000000..8fa5099
--- /dev/null
+++ b/frontend/src/pages/DiscussionForum.js
@@ -0,0 +1,209 @@
+export async function renderDiscussionForum(container) {
+    // Initialize questions data
+    let questions = JSON.parse(localStorage.getItem('questions')) || [];
+
+    // Helper function to save questions to localStorage
+    const saveQuestions = () => {
+        localStorage.setItem('questions', JSON.stringify(questions));
+    };
+
+    // Function to handle adding a new question
+    const addQuestion = (content) => {
+        const newQuestion = {
+            id: Date.now(),
+            content: content,
+            answered: false,
+            answer: '',
+        };
+        questions.push(newQuestion);
+        saveQuestions();
+        render();
+    };
+
+    // Function to handle adding an answer to a question
+    const addAnswer = (questionId, answerContent) => {
+        questions = questions.map(q =>
+            q.id === questionId ? { ...q, answered: true, answer: answerContent } : q
+        );
+        saveQuestions();
+        render();
+    };
+
+    // Function to render the Question Card
+    const renderQuestionCard = (question) => {
+        const card = document.createElement('div');
+        card.classList.add('bg-white', 'dark:bg-gray-800', 'p-4', 'rounded-md', 'shadow-md', 'mb-4', 'w-[30%]');
+
+        const questionText = document.createElement('p');
+        questionText.textContent = question.content;
+        questionText.classList.add('text-lg', 'text-gray-800', 'dark:text-gray-100');
+
+        card.appendChild(questionText);
+
+        if (question.answered) {
+            const answerSection = document.createElement('div');
+            answerSection.classList.add('mt-4', 'text-gray-600', 'dark:text-gray', 'dark:bg-gray-700', 'p-5', 'rounded-lg')
+            const answerTitle = document.createElement('h3');
+            answerTitle.textContent = 'Answer:';
+            answerTitle.classList.add('text-indigo-600', 'dark:text-indigo-400');
+
+            const answerText = document.createElement('p');
+            answerText.textContent = question.answer;
+            answerText.classList.add('text-gray-700', 'dark:text-gray-300');
+
+            answerSection.appendChild(answerTitle);
+            answerSection.appendChild(answerText);
+            card.appendChild(answerSection);
+        } else {
+            const answerForm = renderAnswerForm(question.id);
+            card.appendChild(answerForm);
+        }
+
+        return card;
+    };
+    // Function to render the Question Form
+    const renderQuestionForm = () => {
+        const formContainer = document.createElement('div');
+        formContainer.classList.add('bg-white', 'dark:bg-gray-800', 'p-4', 'rounded-md', 'shadow-md', 'mb-6');
+
+        const textarea = document.createElement('textarea');
+        textarea.placeholder = 'Ask your question...';
+        textarea.classList.add('w-full', 'p-3', 'border', 'rounded-md', 'dark:bg-gray-700', 'dark:text-white', 'focus:outline-none', 'focus:ring-2', 'focus:ring-indigo-500');
+
+        const button = document.createElement('button');
+        button.textContent = 'Ask Question';
+        button.classList.add('mt-4', 'bg-indigo-500', 'text-white', 'px-4', 'py-2', 'rounded-md', 'hover:bg-indigo-600', 'focus:outline-none', 'focus:ring-2', 'focus:ring-indigo-500');
+
+        formContainer.appendChild(textarea);
+        formContainer.appendChild(button);
+
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            const content = textarea.value.trim();
+            if (content) {
+                addQuestion(content);
+                textarea.value = '';
+            }
+        });
+
+        return formContainer;
+    };
+
+    // Function to render the Answer Form
+    const renderAnswerForm = (questionId) => {
+        const formContainer = document.createElement('div');
+        formContainer.classList.add('bg-white', 'dark:bg-gray-800', 'p-4', 'rounded-md', 'shadow-md', 'mt-4');
+
+        const textarea = document.createElement('textarea');
+        textarea.placeholder = 'Write your answer...';
+        textarea.classList.add('w-full', 'p-3', 'border', 'rounded-md', 'dark:bg-gray-700', 'dark:text-white', 'focus:outline-none', 'focus:ring-2', 'focus:ring-indigo-500');
+
+        const button = document.createElement('button');
+        button.textContent = 'Submit Answer';
+        button.classList.add('mt-4', 'bg-green-500', 'text-white', 'px-4', 'py-2', 'rounded-md', 'hover:bg-green-600', 'focus:outline-none', 'focus:ring-2', 'focus:ring-green-500');
+
+        formContainer.appendChild(textarea);
+        formContainer.appendChild(button);
+
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            const answerContent = textarea.value.trim();
+            if (answerContent) {
+                addAnswer(questionId, answerContent);
+                textarea.value = '';
+            }
+        });
+
+        return formContainer;
+    };
+
+
+
+    // Function to render the list of questions
+    const renderQuestionList = () => {
+        // Create container divs for unanswered and answered sections
+        const unansweredContainer = document.createElement('div');
+        const answeredContainer = document.createElement('div');
+
+        // Create titles for unanswered and answered questions
+        const unansweredTitle = document.createElement('h2');
+        unansweredTitle.textContent = 'Unanswered Questions';
+        unansweredTitle.classList.add('text-2xl', 'font-semibold', 'mb-4', 'text-gray-800', 'dark:text-white');
+
+        const answeredTitle = document.createElement('h2');
+        answeredTitle.textContent = 'Answered Questions';
+        answeredTitle.classList.add('text-2xl', 'font-semibold', 'mb-4', 'text-gray-800', 'dark:text-white', 'mt-8');
+
+        // Append the titles to their respective containers
+        unansweredContainer.appendChild(unansweredTitle);
+        answeredContainer.appendChild(answeredTitle);
+
+        // Filter questions into answered and unanswered arrays
+        const unansweredQuestions = questions.filter(q => !q.answered);
+        const answeredQuestions = questions.filter(q => q.answered);
+
+        // Create a wrapper div for unanswered questions
+        const unansweredCardsContainer = document.createElement('div');
+        unansweredCardsContainer.classList.add('flex', 'gap-9', 'flex-wrap'); // Add space between cards
+
+        // Handle unanswered questions
+        if (unansweredQuestions.length === 0) {
+            const noUnansweredMessage = document.createElement('p');
+            noUnansweredMessage.textContent = 'No unanswered questions yet.';
+            unansweredCardsContainer.appendChild(noUnansweredMessage);
+        } else {
+            unansweredQuestions.forEach(q => {
+                const questionCard = renderQuestionCard(q);
+                unansweredCardsContainer.appendChild(questionCard);
+            });
+        }
+
+        // Create a wrapper div for answered questions
+        const answeredCardsContainer = document.createElement('div');
+        answeredCardsContainer.classList.add('flex', 'gap-9', 'flex-wrap'); // Add space between cards
+
+        // Handle answered questions
+        if (answeredQuestions.length === 0) {
+            const noAnsweredMessage = document.createElement('p');
+            noAnsweredMessage.textContent = 'No answered questions yet.';
+            answeredCardsContainer.appendChild(noAnsweredMessage);
+        } else {
+            answeredQuestions.forEach(q => {
+                const questionCard = renderQuestionCard(q);
+                answeredCardsContainer.appendChild(questionCard);
+            });
+        }
+
+        // Append the card containers to their respective sections
+        unansweredContainer.appendChild(unansweredCardsContainer);
+        answeredContainer.appendChild(answeredCardsContainer);
+
+        // Append both sections to the container
+        container.appendChild(unansweredContainer);
+        container.appendChild(answeredContainer);
+    };
+
+
+
+    const render = () => {
+        container.innerHTML = '';  // Clear the container
+
+        // Create the heading for the forum
+        const heading = document.createElement('h1');
+        heading.textContent = 'Wordwise Discussion Forum';
+        heading.classList.add('text-3xl', 'font-bold', 'mb-6', 'text-gray-800', 'dark:text-white');
+        container.appendChild(heading);
+
+        // First, append the question form at the top
+        const questionForm = renderQuestionForm();
+        container.appendChild(questionForm);
+
+        // Then, append the question list (answered and unanswered)
+        const questionList = renderQuestionList();
+        container.appendChild(questionList);
+    };
+
+
+
+    render();  // Initial render
+}
diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
index e5e996c..1eaceaf 100644
--- a/frontend/src/styles/output.css
+++ b/frontend/src/styles/output.css
@@ -766,6 +766,10 @@ video {
   height: 2rem;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-1\/3 {
   width: 33.333333%;
 }
@@ -819,37 +823,28 @@ video {
   width: 100%;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
+.w-\[27\%\] {
+  width: 27%;
 }
 
-.max-w-screen-xl {
-  max-width: 1280px;
+.w-\[28\%\] {
+  width: 28%;
 }
 
-.translate-x-0 {
-  --tw-translate-x: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.w-\[29\%\] {
+  width: 29%;
 }
 
-.translate-x-10 {
-  --tw-translate-x: 2.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.w-\[30\%\] {
+  width: 30%;
 }
 
-.translate-y-0 {
-  --tw-translate-y: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-10 {
-  --tw-translate-y: 2.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.max-w-4xl {
+  max-width: 56rem;
 }
 
-.translate-x-full {
-  --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.max-w-screen-xl {
+  max-width: 1280px;
 }
 
 .transform {
@@ -912,6 +907,14 @@ video {
   gap: 2rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-9 {
+  gap: 2.25rem;
+}
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -1066,6 +1069,11 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -1136,9 +1144,28 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
+.bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-indigo-100 {
+  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-purple-100 {
+  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
 }
 
 .object-cover {
@@ -1170,6 +1197,10 @@ video {
   padding: 2rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -1200,6 +1231,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1225,11 +1261,6 @@ video {
   padding-bottom: 2rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1440,12 +1471,9 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-100 {
-  opacity: 1;
+.text-indigo-400 {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
 }
 
 .shadow-lg {
@@ -1466,6 +1494,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-gray-200 {
   --tw-shadow-color: #e5e7eb;
   --tw-shadow: var(--tw-shadow-colored);
@@ -1526,10 +1560,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
 body {
   font-family: Arial, sans-serif;
   margin: 0;
@@ -1553,6 +1583,12 @@ body.dark-mode {
   padding: 20px;
 }
 
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:bg-\[\#753ff1\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(117 63 241 / var(--tw-bg-opacity));
@@ -1608,6 +1644,16 @@ body.dark-mode {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -1709,6 +1755,11 @@ body.dark-mode {
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-opacity-50:focus {
   --tw-ring-opacity: 0.5;
 }
diff --git a/frontend/src/utils/router.js b/frontend/src/utils/router.js
index 618b72c..038232a 100644
--- a/frontend/src/utils/router.js
+++ b/frontend/src/utils/router.js
@@ -8,6 +8,7 @@ import { renderFeedback } from '../pages/Feedback.js';
 import { renderProfilePage } from '../pages/BloggerProfile.js';
 import { renderFullBlogPost } from '../pages/ReadMoreBlog.js';
 import { renderTermsOfUse } from '../pages/TermsOfUse.js';
+import { renderDiscussionForum } from '../pages/DiscussionForum.js';
 
 const routes = {
     '/': renderHome,
@@ -18,10 +19,10 @@ const routes = {
     '/contact': renderContact,
     '/feedback': renderFeedback,
     '/profile': renderProfilePage,
- 
+    '/discussion': renderDiscussionForum,
     '/readmore': renderFullBlogPost,
     '/termsOfUse': renderTermsOfUse,
- };
+};
 
 export function router() {
     const path = window.location.pathname;
diff --git a/index.html b/index.html
index d5b1871..65c040e 100644
--- a/index.html
+++ b/index.html
@@ -12,15 +12,24 @@
     <link rel="manifest" href="/manifest.json">
 
     <!--font awesome-->
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style"
+        onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    </noscript>
     <!--swiper slider css-->
-    <link rel="preload" href="https://unpkg.com/swiper/swiper-bundle.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"></noscript>
+    <link rel="preload" href="https://unpkg.com/swiper/swiper-bundle.min.css" as="style"
+        onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
+    </noscript>
 
     <!-- bootstrap icons -->
-    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"></noscript>
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+        as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    </noscript>
 
     <!-- for scroll reveal -->
 
@@ -28,15 +37,18 @@
     <!--css-->
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
-    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"></noscript>
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" as="style"
+        onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    </noscript>
 
 
 
-        <!-- Preconnect for faster loading of external resources -->
-        <link rel="preconnect" href="https://cdnjs.cloudflare.com">
-        <link rel="preconnect" href="https://unpkg.com">
-        <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <!-- Preconnect for faster loading of external resources -->
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+    <link rel="preconnect" href="https://unpkg.com">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
     <style>
         /* Chatbot Container */
 
@@ -49,6 +61,7 @@
             z-index: 1000;
             /* Ensure it appears above other elements */
         }
+
         /* Chatbot Button */
 
         .chatbot-button {
@@ -65,6 +78,7 @@
             height: 50px;
             /* Adjusted size */
         }
+
         /* Button Image */
 
         .chatbot-button img {
@@ -73,6 +87,7 @@
             height: 30px;
             /* Adjusted image size */
         }
+
         /* Tooltip Text */
 
         .tooltip-text {
@@ -93,12 +108,14 @@
             /* Prevent text from wrapping */
             line-height: 20px
         }
+
         /* Show Tooltip on Hover */
 
         .chatbot-button:hover .tooltip-text {
             display: block;
             /* Show on hover */
         }
+
         /* Chat Window Styles */
 
         .chat-window {
@@ -119,6 +136,7 @@
             z-index: 1000;
             /* Ensure it appears above other elements */
         }
+
         /* Iframe for Chatbot HTML */
 
         #chat-iframe {
@@ -134,10 +152,12 @@
             .footer-container {
                 padding: 20px;
             }
+
             .col-3-main {
                 flex-direction: row;
                 flex-wrap: wrap;
             }
+
             .col-3 {
                 width: 33.33%;
             }
@@ -156,9 +176,11 @@
                 /* Stack all columns vertically on small screens */
                 margin-bottom: 20px;
             }
+
             .feature-post div {
                 flex-direction: column;
             }
+
             .tags {
                 text-align: center;
             }
@@ -168,13 +190,16 @@
             .feature-post div {
                 align-items: center;
             }
+
             .tags.social {
                 justify-content: center;
             }
+
             .wordwise-footer-content {
                 text-align: center;
             }
         }
+
         /* Optional: You can also set max-width for images */
 
         img.object-fit {
@@ -205,6 +230,7 @@
             margin-bottom: 20px;
             text-align: center;
         }
+
         /* .btn {
     background-color: #4CAF50;
     color: white;
@@ -257,6 +283,7 @@
         .logo h1 a {
             font-size: 40px;
         }
+
         /* .nav-links1 {
     display: flex;
     gap: 30px;
@@ -397,11 +424,14 @@ <h2>WordWise</h2>
                     <!-- Profile Icon -->
 
 
-                    <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                        <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+                    <a href="javascript:void(0);" class="profile-link"
+                        style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                        <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg"
+                            alt="Profile Icon"
+                            style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
 
                     </a>
-                
+
 
                     <!-- Dropdown Menu -->
                     <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
@@ -419,18 +449,18 @@ <h2>WordWise</h2>
                     }
 
                     // Close the dropdown if the user clicks outside of it
-                    window.onclick = function(event) {
+                    window.onclick = function (event) {
                         const menu = document.getElementById('profileMenu');
                         if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
                             menu.style.display = 'none';
                         }
                     }
-                
+
                     // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
-                    document.addEventListener("DOMContentLoaded", function() {
+                    document.addEventListener("DOMContentLoaded", function () {
                         // Retrieve the saved avatar from localStorage
                         const savedAvatar = localStorage.getItem("selectedAvatar");
-                
+
                         // If an avatar is saved, update the profile image
                         if (savedAvatar) {
                             const dropdownProfileImage = document.getElementById("dropdownProfileImage");
@@ -442,23 +472,27 @@ <h2>WordWise</h2>
                 </script>
 
 
-                
-                
+
+
 
 
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
-                    <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
+                    <form class="form-container" onsubmit="return validateLoginForm()"
+                        style="max-width: 400px; margin: auto;">
                         <span class="close-icon" onclick="closeForm('login')">&times;</span>
                         <h2 class="text-center">Login</h2>
                         <div class="form-group">
                             <label for="loginEmail"><b>Email</b></label>
-                            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email" name="email" required>
+                            <input type="email" class="form-control" id="loginEmail" placeholder="Enter Email"
+                                name="email" required>
                         </div>
                         <div class="form-group position-relative">
                             <label for="loginPsw"><b>Password</b></label>
-                            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password" name="psw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleLoginPassword" onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
+                            <input type="password" class="form-control" id="loginPsw" placeholder="Enter Password"
+                                name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleLoginPassword"
+                                onclick="togglePasswordVisibility('loginPsw', 'toggleLoginPassword')"></i>
                         </div>
                         <div class="remember-me">
                             <input type="checkbox" id="remember-me" />
@@ -474,10 +508,12 @@ <h2 class="text-center">Login</h2>
                             }
                         </style>
                         <!-- Google Login Button -->
-                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                        <button type="button" class="btn google-btn"
+                            onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
-                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('login')">CLOSE</button>
+                        <button type="button" class="btn btn-secondary w-100"
+                            onclick="closeForm('login')">CLOSE</button>
                         <!-- Link to Signup Page -->
                         <div class="new">
                             <p>Don't have an account? <a href="javascript:void(0);" onclick="openForm('signup')">Sign up
@@ -488,26 +524,33 @@ <h2 class="text-center">Login</h2>
 
                 <!-- Signup Form -->
                 <div class="form-popup" id="signupForm">
-                    <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
+                    <form class="form-container" onsubmit="return validateSignupForm()"
+                        style="max-width: 400px; margin: auto;">
                         <span class="close-icon" onclick="closeForm('signup')">&times;</span>
                         <h2 class="text-center">Signup</h2>
                         <div class="form-group">
                             <label for="name"><b>Full Name</b></label>
-                            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name" required>
+                            <input type="text" class="form-control" id="name" placeholder="Enter Full Name" name="name"
+                                required>
                         </div>
                         <div class="form-group">
                             <label for="signupEmail"><b>Email</b></label>
-                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email" name="email" required>
+                            <input type="email" class="form-control" id="signupEmail" placeholder="Enter Email"
+                                name="email" required>
                         </div>
                         <div class="form-group position-relative">
                             <label for="signupPsw"><b>Password</b></label>
-                            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
+                            <input type="password" class="form-control" id="signupPsw" placeholder="Enter Password"
+                                name="psw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleSignupPassword"
+                                onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
                         </div>
                         <div class="form-group position-relative">
                             <label for="confirmPsw"><b>Confirm Password</b></label>
-                            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password" name="confirmPsw" required minlength="6">
-                            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword" onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
+                            <input type="password" class="form-control" id="confirmPsw" placeholder="Confirm Password"
+                                name="confirmPsw" required minlength="6">
+                            <i class="bi bi-eye eye-icon" id="toggleConfirmPassword"
+                                onclick="togglePasswordVisibility('confirmPsw', 'toggleConfirmPassword')"></i>
                         </div>
                         <div class="remember-me">
                             <input type="checkbox" id="remember-me" />
@@ -515,10 +558,12 @@ <h2 class="text-center">Signup</h2>
                         </div>
                         <button type="submit" class="btn btn-primary w-100 mb-3">SIGNUP</button>
                         <!-- Google Sign-In Button -->
-                        <button type="button" class="btn google-btn" onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
+                        <button type="button" class="btn google-btn"
+                            onclick="window.location.href='https://accounts.google.com/v3/signin/identifier?authuser=0&continue=https%3A%2F%2Fmyaccount.google.com%2F&ec=GAlAwAE&hl=en_GB&service=accountsettings&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S1527110508%3A1729760212648495&ddm=0'">
                             <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
                             Sign in with Google</button>
-                        <button type="button" class="btn btn-secondary w-100" onclick="closeForm('signup')">CLOSE</button>
+                        <button type="button" class="btn btn-secondary w-100"
+                            onclick="closeForm('signup')">CLOSE</button>
                         <!-- Link to Login Page -->
                         <div class="new">
                             <p>Already have an account? <a href="javascript:void(0);" onclick="openForm('login')">Login
@@ -679,7 +724,8 @@ <h2>Forgot Password</h2>
                 </style>
 
                 <!-- Bootstrap Icons -->
-                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+                <link rel="stylesheet"
+                    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
                 <script src="backend/signup/signup.js"></script>
                 <!-- Link to your JavaScript file -->
 
@@ -703,7 +749,7 @@ <h2>Forgot Password</h2>
     </nav>
     </form>
     <div id="backToTop" title="Back to Top">
-    <i class="fas fa-arrow-up"></i>
+        <i class="fas fa-arrow-up"></i>
     </div>
 
     <!-- JavaScript for Hamburger Menu Toggle -->
@@ -724,18 +770,21 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img1.webp" class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img1.webp"
+                                            class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="blog.html" class="text-title display-1 text-dark">
                                         Roaming Routes
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 01,2020 &nbsp;</span>
-                                        <a href="comment1.html"> <span class="comment-icon" ><i class="bi bi-chat-fill"></i> 13</span></a>
+                                        <a href="comment1.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 13</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -759,12 +808,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img2.webp" class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img2.webp"
+                                            class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="gaming_chronicles.html" class="text-title display-1 text-dark">
                                         Gaming Chronicles
 
@@ -772,7 +823,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Mon 13,2023 &nbsp;</span>
-                                        <a href="comment2.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment2.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -796,12 +848,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img3.webp" class="img-fluid ">
+                                        <img style="height: 250px;width:300px" src="./assets/img3.webp"
+                                            class="img-fluid ">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Virtual Realms
 
@@ -810,7 +864,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 09,2023 &nbsp;</span>
-                                        <a href="comment3.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 19</span></a>
+                                        <a href="comment3.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 19</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -833,12 +888,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img4.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img4.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Laptop life
 
@@ -847,7 +904,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Tue 07,2019 &nbsp;</span>
-                                        <a href="comment4.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 06</span></a>
+                                        <a href="comment4.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 06</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -870,12 +928,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img5.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img5.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Mouthwatering Memoirs
 
@@ -884,7 +944,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Tue 02,2021 &nbsp;</span>
-                                        <a href="comment5.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 10</span></a>
+                                        <a href="comment5.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 10</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -909,12 +970,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img6.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img6.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Tech travels
 
@@ -923,7 +986,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment6.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment6.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -946,12 +1010,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img7.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img7.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Culinary Delights
 
@@ -960,7 +1026,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment7.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment7.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -983,12 +1050,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img8.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img8.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Voyage Vista: Where Travel Dreams Take Flight
 
@@ -997,7 +1066,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment8.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment8.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1020,12 +1090,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img9.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img9.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Beak & Claw: A Chronicle of Birds in the Wild
 
@@ -1034,7 +1106,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment9.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment9.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1057,12 +1130,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img10.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img10.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Wild Whispers: Listening to Nature's Creatures
 
@@ -1071,7 +1146,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment10.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment10.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1094,12 +1170,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img11.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img11.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Aesthetic Abodes: Inspirations from Architectural Design
 
@@ -1108,7 +1186,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment11.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment11.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1130,12 +1209,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img12.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img12.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Nature's Kaleidoscope: A Symphony of Colors and Life
 
@@ -1145,7 +1226,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment12.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment12.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1168,10 +1250,12 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img13.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img13.webp"
+                                            class="img-fluid">
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Chirp & Flutter: Tales from the Aviary
 
@@ -1180,7 +1264,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment13.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment13.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1203,12 +1288,14 @@ <h2>Forgot Password</h2>
                             <div class="card">
                                 <div class="overflow-img">
                                     <a href="#">
-                                        <img style="height: 250px;width:300px" src="./assets/img14.webp" class="img-fluid">
+                                        <img style="height: 250px;width:300px" src="./assets/img14.webp"
+                                            class="img-fluid">
 
 
                                     </a>
                                 </div>
-                                <div class="card-body text-center px-1" style="width: 300px;margin-top: 30px; text-align: center;">
+                                <div class="card-body text-center px-1"
+                                    style="width: 300px;margin-top: 30px; text-align: center;">
                                     <a href="#" class="text-title display-1 text-dark">
                                         Unlocking the Power of the Mind: A Journey to Self-Discovery
 
@@ -1217,7 +1304,8 @@ <h2>Forgot Password</h2>
                                     </a>
                                     <p class="secondary-title text-secondary display-3" style="margin-top:3px;">
                                         <span><i class="fa-regular fa-calendar"></i> Wed 02,2023 &nbsp;</span>
-                                        <a href="comment14.html"> <span class="comment-icon"><i class="bi bi-chat-fill"></i> 12</span></a>
+                                        <a href="comment14.html"> <span class="comment-icon"><i
+                                                    class="bi bi-chat-fill"></i> 12</span></a>
                                         <span class="heart-container">
                                             <button class="heart-btn" style="position: absolute; bottom: -20px;">
                                                 <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg"
@@ -1237,7 +1325,8 @@ <h2>Forgot Password</h2>
 
                 </div>
                 <div style="display: flex;justify-content: center;">
-                    <button class="btn load-posts-btn secondary-title text-light" style="height:50px;width:200px;font-size: large;border-radius: 20px;">Load More
+                    <button class="btn load-posts-btn secondary-title text-light"
+                        style="height:50px;width:200px;font-size: large;border-radius: 20px;">Load More
                         Posts...</button>
                 </div>
             </div>
@@ -1245,8 +1334,8 @@ <h2>Forgot Password</h2>
                 const heartButtons = document.querySelectorAll('.heart-btn');
 
 
-                heartButtons.forEach(function(button) {
-                    button.addEventListener('click', function() {
+                heartButtons.forEach(function (button) {
+                    button.addEventListener('click', function () {
 
                         const heartIcon = this.querySelector('.heart-icon');
 
@@ -1324,7 +1413,9 @@ <h2 class="accordion__question">How do I switch between dark and light themes?</
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">You can easily switch between dark and light themes by clicking the theme toggle button located in the website header. This allows you to customize your viewing experience according to your preference.</p>
+                            <p class="accordion__answer">You can easily switch between dark and light themes by clicking
+                                the theme toggle button located in the website header. This allows you to customize your
+                                viewing experience according to your preference.</p>
                         </div>
                     </div>
 
@@ -1337,7 +1428,10 @@ <h2 class="accordion__question">How do I use the 'Start Writing' page?</h2>
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">The 'Start Writing' page provides a simple interface for quickly creating and publishing blog posts. Just click "Start Writing" from the navigation bar, fill in your title, content, and tags, and publish your blog with a single
+                            <p class="accordion__answer">The 'Start Writing' page provides a simple interface for
+                                quickly creating and publishing blog posts. Just click "Start Writing" from the
+                                navigation bar, fill in your title, content, and tags, and publish your blog with a
+                                single
                                 click.
                             </p>
                         </div>
@@ -1352,7 +1446,9 @@ <h2 class="accordion__question">How does the sliding bar with latest blogs work?
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">The sliding bar on the home page features the latest blogs published on the platform. It updates automatically and allows users to easily scroll through and click on any blog that catches their attention.</p>
+                            <p class="accordion__answer">The sliding bar on the home page features the latest blogs
+                                published on the platform. It updates automatically and allows users to easily scroll
+                                through and click on any blog that catches their attention.</p>
                         </div>
                     </div>
 
@@ -1365,7 +1461,9 @@ <h2 class="accordion__question">How are top picks chosen for the leading blog pa
                         </div>
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">Top picks are curated by a combination of editor recommendations and user engagement metrics, such as views, likes, and comments, to highlight the best content available on Word Wise.</p>
+                            <p class="accordion__answer">Top picks are curated by a combination of editor
+                                recommendations and user engagement metrics, such as views, likes, and comments, to
+                                highlight the best content available on Word Wise.</p>
                         </div>
                     </div>
 
@@ -1379,7 +1477,9 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
 
                         <div class="accordion__content">
                             <!-- <i class="fa-solid fa-comments"></i> -->
-                            <p class="accordion__answer">You can stay updated by following your favorite authors or topics, and by checking the sliding bar for the latest blog posts. You can also subscribe to newsletters or enable notifications for real-time updates.</p>
+                            <p class="accordion__answer">You can stay updated by following your favorite authors or
+                                topics, and by checking the sliding bar for the latest blog posts. You can also
+                                subscribe to newsletters or enable notifications for real-time updates.</p>
                         </div>
                     </div>
                 </div>
@@ -1433,7 +1533,9 @@ <h3>Sentence: </h3>
                 <h2>Subscribe to Our Newsletter</h2>
                 <p>Stay updated with the latest articles and insights from WordWise.</p>
                 <form class="wordwise-newsletter-form" id="newsletterForm" novalidate>
-                    <input type="email" id="emailInput" placeholder="Enter your email address" required style="border: 1px solid pink; transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 8px 2px pink';"
+                    <input type="email" id="emailInput" placeholder="Enter your email address" required
+                        style="border: 1px solid pink; transition: transform 0.2s ease, box-shadow 0.2s ease;"
+                        onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 8px 2px pink';"
                         onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
                     <div id="error-message" style="color: red; display: none;">Please include '@' in your email address.
                     </div>
@@ -1452,6 +1554,7 @@ <h2>Subscribe to Our Newsletter</h2>
                 border: 1px solid pink;
                 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
             }
+
             /* Hover effect for glow */
 
             #emailInput:hover {
@@ -1483,13 +1586,13 @@ <h2>Subscribe to Our Newsletter</h2>
 
     <script>
         // JavaScript Functionality
-        document.getElementById('chatbot-toggle').addEventListener('click', function() {
+        document.getElementById('chatbot-toggle').addEventListener('click', function () {
             const chatWindow = document.getElementById('chat-window');
             // Toggle visibility of the chat window
             chatWindow.style.display = chatWindow.style.display === 'none' || chatWindow.style.display === '' ? 'flex' : 'none';
         });
 
-        document.getElementById('close-chat').addEventListener('click', function() {
+        document.getElementById('close-chat').addEventListener('click', function () {
             document.getElementById('chat-window').style.display = 'none'; // Hide chat on close
         });
     </script>
@@ -1503,7 +1606,8 @@ <h2 class="footer-title secondary-title">About Us</h2>
 
                         <div class="secondary-title text-secondary ">
                             <p class="mt-2 text-lg" style="text-align: left;">
-                                We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
+                                We are a close-knit team of passionate storytellers dedicated to sharing captivating
+                                content with the world.
                             </p>
 
                             <address class="mt-2">
@@ -1530,10 +1634,14 @@ <h2 class="footer-title secondary-title">About Us</h2>
 
                             <div>
                                 <!-- <img src="https://hits.sh/anshika-26.github.io/WordWise.svg?label=Website%20Views&extraCount=1515&color=30322f&labelColor=F5B3B5" alt="Web views" style="height: 20px;width: 150px;margin-top: 40px;"> -->
-                                 <div class="containerWebsiteViews">
-                                    <div class="containerText"><p>Website Views</p></div>
-                                    <div class="containerNumbers"><p id="visitorCount">0</p></div>
-                                 </div>
+                                <div class="containerWebsiteViews">
+                                    <div class="containerText">
+                                        <p>Website Views</p>
+                                    </div>
+                                    <div class="containerNumbers">
+                                        <p id="visitorCount">0</p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
@@ -1553,7 +1661,8 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                                 Embrace the beauty of nature through our enchanting blog, where we
                                                 celebrate the wonders of the natural world
                                             </a>
-                                            <p class="secondary-title text-secondary " style="margin-top:3px;margin-left:0px; text-align: left; ">
+                                            <p class="secondary-title text-secondary "
+                                                style="margin-top:3px;margin-left:0px; text-align: left; ">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
                                             </p>
                                         </div>
@@ -1572,7 +1681,8 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                                 Embark on unforgettable journeys through our travel blog, where
                                                 wanderlust meets inspiration
                                             </a>
-                                            <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
+                                            <p class="secondary-title text-secondary display-3"
+                                                style="margin-top:3px;margin-left:0px; text-align: left;">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
                                             </p>
                                         </div>
@@ -1589,7 +1699,8 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                                             <a href="#" class="text-title display-2 text-dark">
                                                 Gaming Adventures Unleashed
                                             </a>
-                                            <p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
+                                            <p class="secondary-title text-secondary display-3"
+                                                style="margin-top:3px;margin-left:0px; text-align: left;">
                                                 <span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
                                             </p>
                                         </div>
@@ -1602,13 +1713,13 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                 <div class="col-3">
                     <h2 class="footer-title secondary-title">Popular Tags</h2>
                     <div class="tags">
-                      <div class="d-flex-gap flex-wrap">
-                        <a href="./blog.html" class="nav-link btn category-btn">Travel</a>
-                        <a href="./blog.html" class="nav-link btn category-btn">Food</a>
-                        <a href="./blog.html" class="nav-link btn category-btn">Lifestyle</a>
-                        <a href="./blog.html" class="nav-link btn category-btn">Technology</a>
-                        <a href="./blog.html" class="nav-link btn category-btn">Fashion</a>
-                    </div>
+                        <div class="d-flex-gap flex-wrap">
+                            <a href="./blog.html" class="nav-link btn category-btn">Travel</a>
+                            <a href="./blog.html" class="nav-link btn category-btn">Food</a>
+                            <a href="./blog.html" class="nav-link btn category-btn">Lifestyle</a>
+                            <a href="./blog.html" class="nav-link btn category-btn">Technology</a>
+                            <a href="./blog.html" class="nav-link btn category-btn">Fashion</a>
+                        </div>
 
                     </div>
                     <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
@@ -1626,8 +1737,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
                             <a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light">
                                 <i class="fab fa-dribbble"></i>
                             </a>
-                            <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank"
-                               class="nav-link btn bg-light">
+                            <a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31"
+                                id="github" target="_blank" class="nav-link btn bg-light">
                                 <i class="fab fa-github"></i>
                             </a>
                         </div>
@@ -1645,7 +1756,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
             </div>
         </div>
         <script>
-            document.getElementById('scrollToTop').addEventListener('click', function() {
+            document.getElementById('scrollToTop').addEventListener('click', function () {
                 window.scrollTo({
                     top: 0,
                     behavior: 'smooth' // Smooth scrolling effect
@@ -1680,7 +1791,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     <script src="progress_bar.js"></script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
     <script>
-        window.addEventListener("scroll", function() {
+        window.addEventListener("scroll", function () {
             var scrollPosition = window.scrollY;
             var height = document.body.offsetHeight - window.innerHeight;
             if (scrollPosition > 90) {
@@ -1690,7 +1801,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
             }
         });
 
-        document.getElementById("backToTop").addEventListener("click", function() {
+        document.getElementById("backToTop").addEventListener("click", function () {
             window.scrollTo({
                 top: 0,
                 behavior: "smooth"
@@ -1744,54 +1855,54 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 
     <div id="back-to-top" class="back-to-top">
         <i class="fas fa-chevron-up"></i>
-      </div>
+    </div>
 
-      <style>
+    <style>
         .back-to-top {
-          position: fixed;
-          bottom: 20px;
-          right: 20px;
-          width: 50px;
-          height: 50px;
-          background-color: #007bff;
-          color: white;
-          border-radius: 50%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-          transition: opacity 0.3s;
-          opacity: 0;
-          visibility: hidden;
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            background-color: #007bff;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: opacity 0.3s;
+            opacity: 0;
+            visibility: hidden;
         }
 
         .back-to-top.show {
-          opacity: 1;
-          visibility: visible;
+            opacity: 1;
+            visibility: visible;
         }
-      </style>
+    </style>
 
-      <script>
+    <script>
         const backToTopButton = document.getElementById('back-to-top');
 
         window.addEventListener('scroll', () => {
-          if (window.scrollY > 300) {
-            backToTopButton.classList.add('show');
-          } else {
-            backToTopButton.classList.remove('show');
-          }
+            if (window.scrollY > 300) {
+                backToTopButton.classList.add('show');
+            } else {
+                backToTopButton.classList.remove('show');
+            }
         });
 
-        backToTopButton.addEventListener('click', ()=>{
-          window.scrollTo({
-            top: 0,
-            behavior:'smooth'
-          });
+        backToTopButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
         });
-      </script>
+    </script>
 
-<script src="scripts.js"></script> <!-- Link to your service worker registration script -->
+    <script src="scripts.js"></script> <!-- Link to your service worker registration script -->
 
 </body>