Added blog page

app.py

@@ -89,6 +89,15 @@ def about():
 def contact():
     return render_template('contact.html')
 
+@app.route("/disclaimer")
+def disclaimer():
+    return render_template("disclaimer.html")
+
+@app.route("/blog")
+def blog():
+    return render_template("blog.html")
+
+
 
 
 def index():

static/blog.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const posts = document.querySelectorAll(".blog-post");
+  const prevBtn = document.getElementById("prev-btn");
+  const nextBtn = document.getElementById("next-btn");
+
+  let current = 0;
+
+  function showPost(index) {
+    posts.forEach((post, i) => post.classList.toggle("active", i === index));
+  }
+
+  prevBtn.addEventListener("click", () => {
+    current = (current - 1 + posts.length) % posts.length;
+    showPost(current);
+  });
+
+  nextBtn.addEventListener("click", () => {
+    current = (current + 1) % posts.length;
+    showPost(current);
+  });
+
+  showPost(current);
+});

static/style.css

@@ -1692,3 +1692,190 @@ body.dark .about-card {
 .privacy-container h3 {
   color: #6c5ce7; /* purple tone consistent with site theme */
 }
+
+/* ================================
+   Disclaimer Page Styling
+================================ */
+.disclaimer-container {
+  max-width: 800px;
+  margin: 4rem auto;
+  padding: 2rem;
+  background: var(--card-light);
+  border-radius: 1rem;
+  box-shadow: var(--shadow-light);
+  line-height: 1.7;
+}
+
+body.dark .disclaimer-container {
+  background: var(--card-dark);
+  box-shadow: var(--shadow-dark);
+}
+
+.disclaimer-container h1 {
+    font-size: 2rem;
+  font-weight: 800;
+  color: #6c5ce7; /* purple to match Quick Fact Checker title */
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.disclaimer-container h2 {
+  color: #6c5ce7;
+  margin-top: 1.5rem;
+}
+
+.disclaimer-container p {
+  color: var(--text-secondary-light);
+  margin: 0.75rem 0;
+}
+
+body.dark .disclaimer-container p {
+  color: var(--text-secondary-dark);
+}
+
+.disclaimer-hero {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.disclaimer-hero img {
+  max-width: 300px;
+  height: auto;
+  opacity: 0.9;
+}
+
+/* ===== BLOG PAGE (Slideshow Style) ===== */
+.blog-main {
+  max-width: 900px;
+  margin: 2rem auto;
+  padding: 1rem;
+  text-align: center;
+}
+
+.blog-page-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #6c5ce7;
+  margin-bottom: 0.5rem;
+}
+
+.blog-page-subtitle {
+  color: var(--text-secondary-light);
+  margin-bottom: 2rem;
+}
+body.dark .blog-page-subtitle {
+  color: var(--text-secondary-dark);
+}
+
+.blog-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blog-content {
+  width: 100%;
+  overflow: hidden;
+}
+
+.blog-post {
+  display: none;
+  background: var(--card-light);
+  padding: 2rem;
+  border-radius: 1.5rem;
+  box-shadow: var(--shadow-light);
+  animation: fadeIn 0.4s ease;
+}
+body.dark .blog-post {
+  background: var(--card-dark);
+  box-shadow: var(--shadow-dark);
+}
+
+.blog-post.active {
+  display: block;
+}
+
+.blog-post h2 {
+  color: #6c5ce7;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+}
+
+.blog-post h3 {
+  font-size: 1.1rem;
+  font-weight: 500; /* 💡 This makes it lighter than default (usually 600-700) */
+  color: var(--text-primary-light);
+  margin-top: 1.8rem;
+  margin-bottom: 0.5rem;
+}
+body.dark .blog-post h3 {
+  color: var(--text-primary-dark);
+}
+
+
+.blog-post p {
+  font-size: 1rem;
+  color: var(--text-secondary-light);
+  line-height: 1.6;
+}
+body.dark .blog-post p {
+  color: var(--text-secondary-dark);
+}
+
+.blog-img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #f3f0ff;
+  padding: 10px;
+  margin-bottom: 1rem;
+}
+
+.nav-arrow {
+  background: rgba(108, 92, 231, 0.15);
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 2rem;
+  color: #6c5ce7;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+.nav-arrow:hover {
+  background: rgba(108, 92, 231, 0.25);
+  color: #8e7dff;
+}
+
+.nav-arrow.left {
+  left: -60px;
+}
+.nav-arrow.right {
+  right: -60px;
+}
+
+
+@media (max-width: 768px) {
+  .nav-arrow.left { left: 10px; }
+  .nav-arrow.right { right: 10px; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+  .nav-arrow.left { left: 10px; }
+  .nav-arrow.right { right: 10px; }
+}
+

templates/about.html

@@ -31,7 +31,7 @@
         <ul class="nav-links">
           <li><a href="/about" class="nav-link">About</a></li>
           <li><a href="/#how-it-works" class="nav-link">How It Works</a></li>
-          <li><a href="/#blog" class="nav-link">Blog</a></li>
+          <li><a href="/blog" class="nav-link">Blog</a></li>
           <a href="/dashboard" class="nav-dashboard">Dashboard</a>
           <li>  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
@@ -147,15 +147,15 @@ <h4 class="footer-title">Company</h4>
             <h4 class="footer-title">Resources</h4>
             <ul class="footer-list">
               <li><a href="#terms" class="footer-link">Terms of Service</a></li>
-              <li><a href="#blog" class="footer-link">Blog</a></li>
+              <li><a href="/blog" class="footer-link">Blog</a></li>
             </ul>
           </div>
 
           <div class="footer-column">
             <h4 class="footer-title">Legal</h4>
             <ul class="footer-list">
               <li><a href="/privacy" class="footer-link">Privacy Policy</a></li>
-              <li><a href="#disclaimer" class="footer-link">Disclaimer</a></li>
+              <li><a href="/disclaimer" class="footer-link">Disclaimer</a></li>
             </ul>
           </div>
         </div>