Update category.html

category.html

@@ -652,6 +652,29 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
             <div class="wordwise-footer-content">
                 <p>&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
             </div>
+            <!-- Add the FAQ button here, outside the copyright div -->
+            <button id="faqButton" class="btn btn-primary">FAQ</button>
+        </div>
+
+        <!-- FAQ Modal -->
+        <div id="faqModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2>Frequently Asked Questions</h2>
+                <div class="faq-item">
+                    <h3>What categories does WordWise cover?</h3>
+                    <p>WordWise covers a wide range of categories including Food, Travel, Technology, Lifestyle, Health, and Fashion.</p>
+                </div>
+                <div class="faq-item">
+                    <h3>How can I browse articles in a specific category?</h3>
+                    <p>You can click on any category box on this page to view articles specific to that category.</p>
+                </div>
+                <div class="faq-item">
+                    <h3>Can I contribute to multiple categories?</h3>
+                    <p>Yes! You're welcome to contribute to any category that aligns with your expertise and interests.</p>
+                </div>
+                <!-- Add more FAQ items as needed -->
+            </div>
         </div>
     </footer>
     <!-- .footer -->
@@ -668,6 +691,70 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
     <script src="profiledropdown.js"></script>
+
+    <style>
+        /* ... existing styles ... */
+
+        .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;
+        }
+    </style>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var modal = document.getElementById("faqModal");
+            var btn = document.getElementById("faqButton");
+            var span = document.getElementsByClassName("close")[0];
+
+            btn.addEventListener('click', function() {
+                modal.style.display = "block";
+            });
+
+            span.addEventListener('click', function() {
+                modal.style.display = "none";
+            });
+
+            window.addEventListener('click', function(event) {
+                if (event.target == modal) {
+                    modal.style.display = "none";
+                }
+            });
+
+            // Update the current year
+            document.getElementById('current-year').textContent = new Date().getFullYear();
+        });
+    </script>
 </body>
 
 </html>