From e51278586def4f3b9ddc50ecaf08dcd8d30baf46 Mon Sep 17 00:00:00 2001
From: Shivansh <shivanshsaxena2910@gmail.com>
Date: Sat, 9 Nov 2024 03:11:31 +0530
Subject: [PATCH] added FE for faq forum

---
 forum.html | 936 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |   6 +
 2 files changed, 942 insertions(+)
 create mode 100644 forum.html
diff --git a/forum.html b/forum.html
new file mode 100644
index 0000000..60f8717
--- /dev/null
+++ b/forum.html
@@ -0,0 +1,936 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WordWise - FAQs Forum</title>
+    <link rel="shortcut icon" type="image/x-icon" href="/images/favi.webp" />
+    <!--font awesome-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!--swiper slider css-->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/swiper/swiper-bundle.min.css"
+    />
+
+    <!--css-->
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="start_writing.css" />
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html, body {
+
+        height:  100%;
+        margin:  0;
+        padding:  0;
+        overflow-x:  hidden;
+
+      }
+
+      body {
+
+        display:  flex;
+        flex-direction:  column;
+        
+      }
+
+      main {
+        flex: 1 0 auto;
+      }
+
+      footer {
+        flex-shrink: 0;
+      }
+    </style>
+    <!-- Script for Navbar Toggle -->
+ <script>
+    function toggleMenu() {
+    const menu = document.getElementById('nav-menu');
+    menu.classList.toggle('active');
+}
+ </script>
+</head>
+
+  <body>
+    <nav>
+      <div class="progress-container">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>
+      <!--header-->
+      <div class="layout-container" style="margin-bottom: 4rem;">
+  
+        <header>
+    
+    
+    
+        <div class="logo" >
+          <a href="index.html">
+            <h2>WordWise</h2>
+          </a>
+        </div>
+        <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="nav-links1" id="navLinks">
+            <a href="index.html">Home</a>
+            <a href="blog.html">Leading Blog</a>
+            <a href="start_writing.html">Start Writing</a>
+            <a href="category.html">Categories</a>
+
+            <a href="contact_us.html">Contact Us</a>
+            <a href="give_feedback.html">Give Feedback</a>
+        </div>
+        <div class="dropdown">
+          <!-- Profile Icon -->
+
+          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+              <i class="fas fa-user-circle"></i>
+          </a>
+      
+
+          <!-- Dropdown Menu -->
+          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+              <li><a href="./profile.html">My Profile</a></li>
+              <li><a href="#login" onclick="openForm('login')">Login</a></li>
+              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          </ul>
+      </div>
+
+        <script>
+            // Function to toggle the visibility of the dropdown menu
+            function toggleMenu() {
+                const menu = document.getElementById('profileMenu');
+                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+            }
+
+            // Close the dropdown if the user clicks outside of it
+            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() {
+                // 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");
+                    if (dropdownProfileImage) {
+                        dropdownProfileImage.src = savedAvatar;  // Update the image source
+                    }
+                }
+            });
+        </script>
+   
+    <!--  Login Form -->
+  <div class="form-popup" id="loginForm">
+    <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>
+        </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>
+        </div>
+        <div class="forgot">
+            <a href="javascript:void(0);" onclick="openForgotPassword()">Forgot Password?</a>
+        </div>
+        <button type="submit" class="btn btn-primary w-100 mb-3">LOGIN</button>
+        <!-- Google Sign-In Button -->
+        <button type="button" class="btn google-btn" onclick="handleGoogleLogin()">
+            <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+            Sign in with Google
+        </button>
+    </form>
+  </div>
+  
+  <!-- Signup Form -->
+  <div class="form-popup" id="signupForm">
+    <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 pattern="[a-zA-Z ]+"
+                        oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
+                        oninput="this.setCustomValidity('')">
+        </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>
+        </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>
+        </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>
+        </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="handleGoogleLogin()">
+          <img src="./assets/google_icon.webp" alt="Google Logo" class="google-logo">
+          Sign in with Google</button>
+    </form>
+  </div>
+
+  <!-- Forgot Password Modal -->
+  <div id="forgot-password-modal" class="modal">
+    <div class="form-container modal-content">
+      <h2>Forgot Password</h2>
+      <p>Please enter your email address to reset your password.</p>
+  
+      <label for="email">Email Address</label>
+      <input type="email" id="email" placeholder="Enter your email" required />
+  
+      <button class="btn" onclick="submitForgotPassword()">Submit</button>
+      <button class="btn cancel" onclick="closeForgotPasswordModal()">Cancel</button>
+    </div>
+  </div>
+  
+  <!-- Toggle Password Visibility Script -->
+  <script>
+    function togglePasswordVisibility(passwordFieldId, iconId) {
+        const passwordField = document.getElementById(passwordFieldId);
+        const togglePassword = document.getElementById(iconId);
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+            togglePassword.classList.remove('bi-eye');
+            togglePassword.classList.add('bi-eye-slash');
+        } else {
+            passwordField.type = 'password';
+            togglePassword.classList.remove('bi-eye-slash');
+            togglePassword.classList.add('bi-eye');
+        }
+    }
+  </script>
+  
+  <!-- CSS Styles -->
+  <style>
+    .form-popup {
+        display: none;
+        position: fixed;
+        z-index: 9;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        max-width: 500px;
+        padding: 20px;
+        background-color: white;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6);
+        border-radius: 10px;
+        box-sizing: border-box;
+    }
+  
+    .form-container h2 {
+        margin-bottom: 20px;
+        color: #333;
+    }
+  
+    .form-group {
+        margin-bottom: 15px;
+    }
+  
+    .form-control {
+        border-radius: 5px;
+        padding: 12px;
+        font-size: 16px; 
+        line-height: 1.5; 
+        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+        width: 100%;
+    }
+  
+    .forgot {
+        text-align: right; 
+        margin-left: 50px;
+        font-size: 10px;   
+        margin-top: -40px;
+  
+    }
+  
+    .btn {
+        margin-top: 10px;
+        border-radius: 5px;
+    }
+  
+    .eye-icon {
+        position: absolute;
+        right: 15px;
+        top: 38px;
+        cursor: pointer;
+        color: #007bff;
+    }
+  
+    .close-icon {
+        font-size: 24px;
+        cursor: pointer;
+        float: right;
+    }
+  
+    .position-relative {
+        position: relative;
+    }
+  
+    /* Login button jumping issue fix */
+    .btn-primary {
+        transition: all 0.3s ease; /* Smooth transition */
+    }
+  
+    .btn-primary:hover {
+        background-color: #0056b3;
+    }
+  
+    .google-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+  
+    .google-logo {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+    }
+  
+    .btn-primary:hover {
+        background-color: #0056b3;
+    }
+  
+          /* Styles for collaborative writing feature */
+          #collaborators {
+          margin-bottom: 15px;
+        }
+  
+        #collaboratorsList {
+          list-style-type: none;
+          padding: 0;
+        }
+  
+        #collaboratorsList li {
+          display: inline-block;
+          margin-right: 10px;
+          padding: 5px 10px;
+          background-color: #f0f0f0;
+          border-radius: 15px;
+        }
+  
+        #addCollaborator {
+          margin-top: 10px;
+        }
+  
+        #collaborativeSection {
+          border: 1px solid #ccc;
+          padding: 15px;
+          margin-bottom: 15px;
+          border-radius: 5px;
+        }
+  
+        #collaborativeContent {
+          width: 100%;
+          min-height: 200px;
+          margin-bottom: 10px;
+        }
+  </style>
+  
+  <!-- Bootstrap Icons and Script for Eye Icon Functionality -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+  <script>
+    function togglePasswordVisibility(passwordFieldId, iconId) {
+        const passwordField = document.getElementById(passwordFieldId);
+        const togglePassword = document.getElementById(iconId);
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+            togglePassword.classList.remove('bi-eye');
+            togglePassword.classList.add('bi-eye-slash');
+        } else {
+            passwordField.type = 'password';
+            togglePassword.classList.remove('bi-eye-slash');
+            togglePassword.classList.add('bi-eye');
+        }
+    }
+  </script>
+
+          <div class="theme-switch-wrapper">
+            <label class="theme-switch" for="checkbox">
+              <input type="checkbox" id="checkbox" />
+              <div class="slider">
+                <img
+                  src="https://img.icons8.com/emoji/48/000000/sun-emoji.png"
+                  alt="Sun"
+                  class="icon sun-icon"
+                />
+                <img
+                  src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png"
+                  alt="Moon"
+                  class="icon moon-icon"
+                />
+              </div>
+            </label>
+            <span id="mode-label"></span>
+                
+          </div>
+        </header>
+      </div>
+    </nav>
+    <!--header-->
+    <!-- main -->
+    <!-- main -->
+    <main style="margin-top: 8rem;">
+        <div class="blog-form-container">
+          <form id="blogForm" onsubmit="postQuestion(event)">
+            <h2 style="margin-bottom: 15px">FAQs Forum</h2>
+      
+            <label for="blogHeading">Ask a Question:</label>
+            <input
+              type="text"
+              id="blogHeading"
+              name="heading"
+              placeholder="Enter your question"
+              required
+              style="width: 100%; padding: 10px; margin-top: 10px; border-radius: 5px; border: 1px solid #ddd;"
+            />
+            <button
+              class="btn load-posts-btn secondary-title text-light"
+              style="height:50px;width:100%;font-size: large;border-radius: 20px;"
+              type="submit"
+            >
+              Submit Question
+            </button>
+          </form>
+        </div>
+      
+        <!-- Answered Questions Section -->
+        <div style="margin-top: 30px;">
+          <h2>Answered Questions</h2>
+          <div id="answeredQuestionsContainer" style="margin-top: 15px;">
+            <!-- Answered questions will be displayed here -->
+            <div style="padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
+              <p style="font-weight: bold;">Q: What is the capital of France?</p>
+              <div style="margin-left: 20px; color: #555;">
+                <p>A: The capital of France is Paris.</p>
+              </div>
+            </div>
+            <div style="padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
+              <p style="font-weight: bold;">Q: What is the largest ocean in the world?</p>
+              <div style="margin-left: 20px; color: #555;">
+                <p>A: The Pacific Ocean is the largest ocean in the world.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      
+        <!-- Unanswered Questions Section -->
+        <div style="margin-top: 30px;">
+          <h2>Unanswered Questions</h2>
+          <div id="unansweredQuestionsContainer" style="margin-top: 15px;">
+            <!-- Unanswered questions will be displayed here -->
+            <div style="padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
+              <p style="font-weight: bold;">Q: What is the square root of 64?</p>
+              <button
+                class="btn load-posts-btn secondary-title text-light"
+                style="height: 50px; width: 100%; font-size: large; border-radius: 20px; cursor: pointer;"
+                onclick="openModal('unanswered1')"
+              >
+                Answer Question
+              </button>
+            </div>
+            <div style="padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
+              <p style="font-weight: bold;">Q: What is the chemical symbol for gold?</p>
+              <button
+                class="btn load-posts-btn secondary-title text-light"
+                style="height: 50px; width: 100%; font-size: large; border-radius: 20px; cursor: pointer;"
+                onclick="openModal('unanswered2')"
+              >
+                Answer Question
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+      
+      <!-- Modal Popup for Answer -->
+      <div id="answerModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; padding: 20px;">
+        <div style="background-color: #fff; padding: 20px; border-radius: 8px; width: 50%; text-align: center;">
+          <h3>Answer the Question</h3>
+          <textarea id="answerInput" placeholder="Enter your answer here" style="width: 100%; height: 100px; margin-top: 10px; padding: 10px; border-radius: 5px;"></textarea>
+          <br />
+          <button onclick="submitAnswer()" class="btn load-posts-btn secondary-title text-light" style="width: 100%; font-size: large; border-radius: 20px; margin-top: 10px;">Submit Answer</button>
+          <button onclick="closeModal()" class="btn load-posts-btn secondary-title text-light" style="width: 100%; font-size: large; border-radius: 20px; margin-top: 10px;">Cancel</button>
+        </div>
+      </div>
+      
+      <script>
+        let currentQuestionId = null;
+      
+        // Open the modal to answer a question
+        function openModal(questionId) {
+          currentQuestionId = questionId;  // Store the current question ID
+          document.getElementById("answerModal").style.display = "flex";
+        }
+      
+        // Close the modal
+        function closeModal() {
+          document.getElementById("answerModal").style.display = "none";
+        }
+      
+        // Submit the answer
+        async function submitAnswer() {
+          const answerContent = document.getElementById("answerInput").value.trim();
+      
+          if (!answerContent) {
+            alert("Please enter an answer.");
+            return;
+          }
+      
+          // Here, you would send the answer to the backend with the currentQuestionId
+          console.log("Answer submitted for question ID", currentQuestionId);
+          console.log("Answer content:", answerContent);
+      
+          // Close the modal and clear the input
+          closeModal();
+          document.getElementById("answerInput").value = "";
+        }
+      
+        // Handle question submission (for asking a new question)
+        function postQuestion(event) {
+          event.preventDefault();
+          const questionInput = document.getElementById("blogHeading");
+          const questionContent = questionInput.value.trim();
+      
+          if (questionContent) {
+            // You would send this to the backend in a real app
+            console.log("New question submitted:", questionContent);
+            questionInput.value = ""; // Clear input field
+          } else {
+            alert("Please enter a question.");
+          }
+        }
+      </script>
+      
+      
+
+    <!-- <button id="backTotop ">⬆️</button>  -->
+    </form>
+    <div id="backToTop " title="Back to Top">
+      <i class="fas fa-arrow-up"></i>
+    </div> 
+
+    <!-- main -->
+
+
+    
+<!-- footer -->
+<footer id="footer">
+  <div class="footer-container">
+      <div class="row mb-3 col-3-main">
+          <div class="col-3">
+              <div id="about-us">
+                  <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.
+                      </p>
+                      <address class="mt-2">
+                          <i class="fas fa-map-marker-alt text-primary"></i>
+                          5 South Main Street Los Angeles, ZZ-9611 USA
+                      </address>
+                      <div class="phone mt-2">
+                          <i class="fas fa-mobile text-primary"></i>
+                          125-896-485
+                      </div>
+                      <div class="email mt-2">
+                          <a href="mailto:dailysupport@gmail.com" style="color: #3B3B58;">
+                              <i class="fas fa-envelope text-primary"></i>
+                              <span>dailysupport@gmail.com</span>
+                          </a>
+                      </div>
+                      <div>
+                          <a href="privacy.html" style="color: #520be1e7;">Privacy Policy</a>
+                      </div>
+                      <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: 10px;">
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <div class="col-3">
+              <h2 class="footer-title secondary-title">Featured Post</h2>
+              <div class="feature-post">
+                  <div class="flex-item">
+                      <article class="article">
+                          <div class="d-flex" style="align-items: flex-start;">
+                              <a class="d-flex" href="#">
+                                  <img src="./assets/img9.webp" class="object-fit" alt="">
+                                  <div class="px-1" style="width: 300px;">
+                                      <a href="#" class="text-title display-2 text-dark">
+                                          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;">
+                                          <span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
+                                      </p>
+                                  </div>
+                              </a>
+                          </div>
+                      </article>
+                  </div>
+                  <div class="flex-item">
+                      <article class="article">
+                          <div class="d-flex" style="align-items: flex-start;">
+                              <a class="d-flex" href="#">
+                                  <img src="./assets/img1.webp" class="object-fit" alt="">
+                                  <div class="px-1" style="width: 300px;">
+                                      <a href="#" class="text-title display-2 text-dark">
+                                          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;">
+                                          <span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
+                                      </p>
+                                  </div>
+                              </a>
+                          </div>
+                      </article>
+                  </div>
+                  <div class="flex-item">
+                      <article class="article">
+                          <div class="d-flex" style="align-items: flex-start;">
+                              <a class="d-flex" href="#">
+                                  <img src="./assets/img2.webp" class="object-fit" alt="">
+                                  <div class="px-1" style="width: 300px;">
+                                      <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;">
+                                          <span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
+                                      </p>
+                                  </div>
+                              </a>
+                          </div>
+                      </article>
+                  </div>
+              </div>
+          </div>
+          <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>
+              <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
+              <div class="tags social" id="contact">
+                  <div class="d-flex-gap flex-wrap">
+                      <a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light">
+                          <i class="fab fa-facebook-f"></i>
+                      </a>
+                      <a href="https://x.com/" id="twitter" class="nav-link btn bg-light">
+                          <i class="fa-brands fa-x-twitter"></i>
+                      </a>
+                      <a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light">
+                          <i class="fab fa-instagram"></i>
+                      </a>
+                      <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">
+                          <i class="fab fa-github"></i>
+                      </a>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+  
+  
+  <!-- the authentication copyright -->
+  <div class="wordwise-footer">
+      <div class="wordwise-footer-content">
+          <p>
+              &copy; <span id="current-year"></span> WordWise. All rights
+              reserved.
+          </p>
+      </div>
+  </div>
+</footer>
+    <!-- .footer -->
+     <!-- this script is to display the year in the copyright authentication in the footer -->
+     <script>
+      document.getElementById('current-year').textContent = new Date().getFullYear();
+    </script>
+    
+    <script src="start_writing.js"></script>
+    <script src="main.js"></script>
+    <script src="./darkMode.js"></script>
+    <script src="progress_bar.js"></script>
+    
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
+    <script src="profiledropdown.js"></script>
+    
+    <!-- Updated script including collaborative writing feature -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        // FAQ Modal functionality
+        var modal = document.getElementById("faqModal");
+        var btn = document.getElementById("faqButton");
+        var span = document.getElementsByClassName("close")[0];
+    
+        btn.onclick = function() {
+          modal.style.display = "block";
+        }
+    
+        span.onclick = function() {
+          modal.style.display = "none";
+        }
+    
+        window.onclick = function(event) {
+          if (event.target == modal) {
+            modal.style.display = "none";
+          }
+        }
+    
+        // Collaborative writing feature
+        const addCollaboratorBtn = document.getElementById('addCollaborator');
+        const newCollaboratorInput = document.getElementById('newCollaborator');
+        const collaboratorsList = document.getElementById('collaboratorsList');
+        const collaborativeContent = document.getElementById('collaborativeContent');
+    
+        let collaborators = [];
+    
+        addCollaboratorBtn.addEventListener('click', function() {
+          const email = newCollaboratorInput.value.trim();
+          if (email && !collaborators.includes(email)) {
+            collaborators.push(email);
+            updateCollaboratorsList();
+            newCollaboratorInput.value = '';
+          }
+        });
+    
+        function updateCollaboratorsList() {
+          collaboratorsList.innerHTML = '';
+          collaborators.forEach(email => {
+            const li = document.createElement('li');
+            li.textContent = email;
+            collaboratorsList.appendChild(li);
+          });
+        }
+    
+        // Simulating real-time collaboration (for demonstration purposes)
+        setInterval(() => {
+          if (collaborators.length > 0) {
+            const randomCollaborator = collaborators[Math.floor(Math.random() * collaborators.length)];
+            const simulatedContent = `\n[${randomCollaborator}]: ${generateRandomSentence()}`;
+            collaborativeContent.value += simulatedContent;
+          }
+        }, 10000); // Simulate a new contribution every 10 seconds
+    
+        function generateRandomSentence() {
+          const sentences = [
+            "This is an interesting point.",
+            "I think we should elaborate on this idea.",
+            "Let's consider a different perspective here.",
+            "We could add some examples to support this.",
+            "I suggest we rephrase this part for clarity."
+          ];
+          return sentences[Math.floor(Math.random() * sentences.length)];
+        }
+    
+        // Update PostBlog function to include collaborative content
+        window.PostBlog = function(event) {
+          event.preventDefault();
+          
+          const blogHeading = document.getElementById('blogHeading').value;
+          const blogTopic = document.getElementById('blogTopic').value;
+          const blogImage = document.getElementById('blogImage').files[0];
+          const blogContent = document.getElementById('blogContent').value;
+          const writerName = document.getElementById('writerName').value;
+    
+          // Include collaborative content in the blog post
+          const fullContent = `Collaborative Content:\n${collaborativeContent.value}\n\nAdditional Content:\n${blogContent}`;
+    
+          console.log("Blog Heading:", blogHeading);
+          console.log("Blog Topic:", blogTopic);
+          console.log("Blog Image:", blogImage ? blogImage.name : "No image uploaded");
+          console.log("Full Blog Content:", fullContent);
+          console.log("Writer Name:", writerName);
+          console.log("Collaborators:", collaborators);
+    
+          // Here you would typically send this data to your server
+          // For now, we'll just show an alert
+          alert("Blog post submitted successfully!");
+    
+          // Reset the form
+          document.getElementById('blogForm').reset();
+          collaborativeContent.value = '';
+          collaborators = [];
+          updateCollaboratorsList();
+        };
+    
+        // Voice input functionality (assuming it's part of start_writing.js)
+        const startVoiceInputBtn = document.getElementById('start-voice-input');
+        if (startVoiceInputBtn) {
+          startVoiceInputBtn.addEventListener('click', function() {
+            // Implement voice input functionality here
+            console.log("Voice input button clicked");
+            // You would typically start voice recognition here
+          });
+        }
+      });
+    </script>
+    <style>
+      .wordwise-footer-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+      }
+
+      #faqButton {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+
+      .modal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0,0,0,0.4);
+      }
+
+      .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+        max-width: 600px;
+      }
+
+      .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: black;
+        text-decoration: none;
+      }
+
+      .faq-item {
+        margin-bottom: 20px;
+      }
+
+      .faq-item h3 {
+        margin-bottom: 10px;
+      }
+    </style>
+
+<div class="gtranslate_wrapper"></div>
+<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+<script src="script.js"></script>
+
+
+<style>
+  #backtoTop {
+    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;
+  }
+
+   
+</style>
+
+<script>
+  const backToTopButton = document.getElementById('back-to-top');
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 300) {
+      backToTopButton.classList.add('show');
+    } else {
+      backToTopButton.classList.remove('show');
+    }
+  });
+
+  backToTopButton.addEventListener('click', ()=>{
+    window.scrollTo({
+      top: 0,
+      behavior:'smooth'
+    });
+  });
+</script>
+
+
+
+
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 56838b5..e8e5b0a 100644
--- a/index.html
+++ b/index.html
@@ -1491,6 +1491,12 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
                                 subscribe to newsletters or enable notifications for real-time updates.</p>
                         </div>
                     </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;"><a href="./forum.html" style="color: white;">FAQs Forum..</a></button>
+                    </div>
+
                 </div>
             </div>
         </section>
