Merge pull request #890 from ananyag309/master

added faq popup modal in all pages
ANSHIKA-26 · Oct 13, 2024 · c570209 · c570209
2 parents 8cd1cb9 + 29c9b8f
commit c570209
Show file tree

Hide file tree

Showing 3 changed files with 326 additions and 4 deletions.
diff --git a/blog.html b/blog.html
@@ -768,8 +768,8 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
                     <img src="./assets/img9.jpg" 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
+                        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 display-3" style="margin-top:3px;">
                         <span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
@@ -851,8 +851,32 @@ <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 -->
+      <div class="faq-button-container">
+        <button id="faqButton" class="btn btn-primary">FAQ</button>
+      </div>
     </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 is WordWise?</h3>
+          <p>WordWise is a blogging platform that covers various topics including travel, technology, lifestyle, and more.</p>
+        </div>
+        <div class="faq-item">
+          <h3>How can I create an account?</h3>
+          <p>You can create an account by clicking on the "Sign Up" button in the navigation bar and filling out the registration form.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Can I contribute to WordWise?</h3>
+          <p>Yes! We welcome guest contributions. Please contact us through the "Contact Us" page for more information.</p>
+        </div>
+        <!-- Add more FAQ items as needed -->
+      </div>
+    </div>
 
   </footer>
   <!-- Script for Navbar Toggle -->
@@ -891,6 +915,85 @@ <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>
-</body>
 
-</html>
+  <!-- Add this script at the end of your body tag -->
+  <script>
+    // Get the modal
+    var modal = document.getElementById("faqModal");
+
+    // Get the button that opens the modal
+    var btn = document.getElementById("faqButton");
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks the button, open the modal 
+    btn.onclick = function() {
+      modal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() {
+      modal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+  </script>
+
+  <style>
+    .faq-button-container {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    .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;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    .faq-item {
+      margin-bottom: 20px;
+    }
+
+    .faq-item h3 {
+      margin-bottom: 10px;
+    }
+  </style>
+
+</body>
+</html>
diff --git a/category.html b/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>
diff --git a/start_writing.html b/start_writing.html
@@ -25,6 +25,26 @@
         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>
@@ -511,6 +531,29 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
             &copy; <span id="current-year"></span> WordWise. All rights
             reserved.
           </p>
+          <!-- Add the FAQ button here -->
+          <button id="faqButton" class="btn btn-primary">FAQ</button>
+        </div>
+      </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 is WordWise?</h3>
+            <p>WordWise is a blogging platform that covers various topics including travel, technology, lifestyle, and more.</p>
+          </div>
+          <div class="faq-item">
+            <h3>How can I start writing?</h3>
+            <p>You can start writing by filling out the form on this page. Make sure to provide a catchy heading, select a topic, and write your content in the text area provided.</p>
+          </div>
+          <div class="faq-item">
+            <h3>Can I upload images with my blog post?</h3>
+            <p>Yes, you can upload an image to accompany your blog post using the "Upload Image" field in the form.</p>
+          </div>
+          <!-- Add more FAQ items as needed -->
         </div>
       </div>
     </footer>
@@ -529,5 +572,94 @@ <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>
+
+    <!-- Add this script at the end of your body tag -->
+    <script>
+      // Get the modal
+      var modal = document.getElementById("faqModal");
+
+      // Get the button that opens the modal
+      var btn = document.getElementById("faqButton");
+
+      // Get the <span> element that closes the modal
+      var span = document.getElementsByClassName("close")[0];
+
+      // When the user clicks the button, open the modal 
+      btn.onclick = function() {
+        modal.style.display = "block";
+      }
+
+      // When the user clicks on <span> (x), close the modal
+      span.onclick = function() {
+        modal.style.display = "none";
+      }
+
+      // When the user clicks anywhere outside of the modal, close it
+      window.onclick = function(event) {
+        if (event.target == modal) {
+          modal.style.display = "none";
+        }
+      }
+    </script>
+
+    <style>
+      .wordwise-footer-content {
+        display: flex;
+        justify-content: space-between;
+        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>
   </body>
 </html>