aarushii25 · May 28, 2026
diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -7501,3 +7501,41 @@ dialog.book-preview-modal::backdrop {
         font-size: 0.95rem;
     }
 }
+/* ==========================================================================
+   Book Club Discussion Forum Styles
+   ========================================================================== */
+.discussion-container { max-width: 800px; margin: 40px auto; }
+.create-post-section {
+    background: var(--card-bg, rgba(255, 255, 255, 0.03));
+    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
+    padding: 25px; border-radius: 12px; margin-bottom: 40px; backdrop-filter: blur(10px);
+}
+.styled-input {
+    width: 100%; padding: 12px 15px; margin-bottom: 15px;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--control-border, rgba(255, 255, 255, 0.1));
+    border-radius: 8px; color: var(--text-main, #fff); font-family: inherit; transition: 0.3s;
+}
+.styled-input:focus { outline: none; border-color: var(--accent-gold, #d4af37); }
+textarea.styled-input { min-height: 100px; resize: vertical; }
+.post-card {
+    background: var(--card-bg, rgba(255, 255, 255, 0.02));
+    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
+    padding: 20px; border-radius: 10px; margin-bottom: 25px;
+}
+.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--text-muted, #a0a0a0); }
+.avatar-icon {
+    width: 35px; height: 35px; background: var(--wood-dark, #3E2723); color: var(--accent-gold, #d4af37);
+    border-radius: 50%; display: flex; align-items: center; justify-content: center;
+}
+.post-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 10px; color: var(--text-main, #fff); }
+.post-text { line-height: 1.6; color: var(--text-muted, #ccc); margin-bottom: 20px; }
+.like-btn {
+    background: none; border: 1px solid #ff4d4d; color: #ff4d4d;
+    padding: 6px 12px; border-radius: 20px; cursor: pointer; margin-bottom: 15px; font-weight: bold;
+}
+.like-btn:hover { background: #ff4d4d; color: white; }
+.comments-section { background: rgba(0, 0, 0, 0.15); padding: 15px; border-radius: 8px; }
+.comment { font-size: 0.9rem; color: var(--text-muted, #bbb); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
+.comment i { color: var(--accent-gold, #d4af37); margin-right: 8px; }
+.add-comment { display: flex; gap: 10px; margin-top: 15px; }
diff --git a/frontend/js/app.js b/frontend/js/app.js
@@ -720,6 +720,10 @@ class BookRenderer {
                         <button class="btn-icon share-btn" title="Share Book"><i class="fa-solid fa-share-nodes"></i></button>
                         <button class="btn-icon mood-btn" title="Explore Mood"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
                         <button class="btn-icon flip-back-btn" title="Flip Back"><i class="fa-solid fa-rotate-left"></i></button>
+
+                        <a href="discuss.html?title=${encodeURIComponent(title)}" class="btn-icon discuss-btn" title="Discuss Book" style="text-decoration: none; display: inline-flex; align-items: center; justify-content: center; color: inherit;">
+        <i class="fa-solid fa-comments"></i>
+    </a>
                     </div>
                 </div>
             </div>

diff --git a/frontend/js/discuss.js b/frontend/js/discuss.js
@@ -0,0 +1,77 @@
+// URL se book ka naam auto-fill karna
+const urlParams = new URLSearchParams(window.location.search);
+const bookTitleParam = urlParams.get('title');
+if (bookTitleParam) {
+    document.getElementById('post-title').value = bookTitleParam;
+}
+
+// LocalStorage setup
+let posts = JSON.parse(localStorage.getItem('biblioDrift_posts')) || [];
+const postForm = document.getElementById('post-form');
+const postsContainer = document.getElementById('posts-container');
+
+function savePosts() {
+    localStorage.setItem('biblioDrift_posts', JSON.stringify(posts));
+}
+
+function renderPosts() {
+    postsContainer.innerHTML = ''; 
+    posts.forEach((post, index) => {
+        const card = document.createElement('div');
+        card.className = 'post-card';
+        card.innerHTML = `
+            <div class="post-header">
+                <div class="avatar-icon"><i class="fa-solid fa-user"></i></div>
+                <strong>${post.username}</strong>
+            </div>
+            <h3 class="post-title">${post.title}</h3>
+            <p class="post-text">${post.content}</p>
+
+            <button onclick="likePost(${index})" class="like-btn">
+                <i class="fa-solid fa-heart"></i> ${post.likes} Likes
+            </button>
+
+            <div class="comments-section">
+                <h4><i class="fa-solid fa-comments"></i> Comments</h4>
+                ${post.comments.map(c => `<div class="comment"><i class="fa-solid fa-reply"></i> ${c}</div>`).join('')}
+                <div class="add-comment">
+                    <input type="text" id="comment-input-${index}" class="styled-input" placeholder="Add a comment..." style="margin-bottom: 0;">
+                    <button onclick="addComment(${index})" class="btn-secondary">Reply</button>
+                </div>
+            </div>
+        `;
+        postsContainer.appendChild(card);
+    });
+}
+
+postForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const newPost = {
+        username: "WanderingReader", 
+        title: document.getElementById('post-title').value,
+        content: document.getElementById('post-content').value,
+        likes: 0,
+        comments: []
+    };
+    posts.unshift(newPost); 
+    savePosts();
+    renderPosts();
+    postForm.reset(); 
+});
+
+window.likePost = (index) => {
+    posts[index].likes++;
+    savePosts();
+    renderPosts();
+}
+
+window.addComment = (index) => {
+    const input = document.getElementById(`comment-input-${index}`);
+    if(input.value.trim() !== "") {
+        posts[index].comments.push(input.value.trim());
+        savePosts();
+        renderPosts();
+    }
+}
+
+renderPosts();
diff --git a/frontend/pages/discuss.html b/frontend/pages/discuss.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book Club Discussion - BiblioDrift</title>
+    <!-- Fonts & Icons -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Georgia&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="../css/style.css"> 
+</head>
+<body data-theme="night">
+
+    <!-- Background Glow -->
+    <div id="sc-glow-outer"></div>
+    <div id="sc-glow-mid"></div>
+    <div id="sc-glow-inner"></div>
+
+    <!-- Header -->
+    <header>
+        <a href="index.html" class="logo">
+            <img style="height: 40px" src="../assets/images/biblioDrift_favicon.png" alt="BiblioDrift Logo"> BiblioDrift
+        </a>
+        <div class="header-controls">
+            <nav class="nav-links">
+                <a href="index.html">Discovery</a>
+                <a href="library.html">My Library</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section class="curated-section discussion-container">
+            <div class="section-header">
+                <h2>Book Club Discussion Forum</h2>
+                <span><i class="fa-solid fa-comments"></i> Reader theories and reviews</span>
+            </div>
+
+            <!-- Post Form -->
+            <div class="create-post-section">
+                <h3 style="color: var(--accent-gold, #d4af37); font-family: 'Playfair Display', serif; margin-bottom: 15px;">Start a Discussion</h3>
+                <form id="post-form">
+                    <input type="text" id="post-title" class="styled-input" placeholder="Book Title or Topic" required>
+                    <textarea id="post-content" class="styled-input" placeholder="Share your thoughts, theories, or reviews..." required></textarea>
+                    <button type="submit" class="btn-primary" style="margin-top: 10px;">
+                        <i class="fa-solid fa-paper-plane"></i> Post
+                    </button>
+                </form>
+            </div>
+
+            <!-- Posts List -->
+            <div id="posts-container"></div>
+        </section>
+    </main>
+
+    <script src="discuss.js"></script>
+</body>
+</html>