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')">×</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')">×</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> + © <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>