Merge pull request #2631 from neeru24/main

Enhance Discussion Forum
ayush-that · Nov 2, 2024 · 57939ad · 57939ad
2 parents c3efd7f + 5145a9f
commit 57939ad
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -29,6 +29,48 @@ main {
 }
 
 /* Header Styles */
+/* Dark Theme Styles */
+body.dark-mode {
+  background-color: #121212;
+  color: #fff;
+}
+
+#forum-title.dark-mode {
+  color: #fff;
+}
+
+.post-container.dark-mode {
+  background: #222;
+  color: #fff;
+}
+
+.post-container.dark-mode textarea {
+  background: #333;
+  border-color: #555;
+  color: #fff;
+}
+
+.post-container.dark-mode textarea:focus {
+  border-color: #fff;
+}
+
+#submit-button.dark-mode {
+  background: #555;
+  color: #fff;
+}
+
+#submit-button.dark-mode:hover {
+  background: #777;
+}
+
+.post.dark-mode {
+  background: #333;
+  color: #fff;
+}
+
+.post.dark-mode:hover {
+  background: #444;
+}
 .destinations h1 {
   color: #2f6be5;
   text-align: center;
@@ -38,7 +80,7 @@ main {
 
 /* Post Container */
 .post-container {
-  background: white;
+  background: rgb(156, 207, 216);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
@@ -83,14 +125,14 @@ button:hover {
 .post {
   margin: 15px 0;
   padding: 15px;
-  background: #e8e8e8;
+  background: #def1b9;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: background 0.3s;
 }
 
 .post:hover {
-  background: #d4d4d4; /* Slightly darker on hover */
+  background: #e6e7a3; 
 }
 
 /* Scroll Button */

diff --git a/index.html b/index.html
@@ -1303,16 +1303,16 @@ <h3 class="holder-name"><a href="#">Ayush Singh</a></h3>
         margin-top: 20px;
       }
     </style>
-    <section id="destinations" class="destinations">
-      <h1>Discussion Forum</h1>
-      <div class="post-container">
-        <form id="postForm">
-          <textarea id="postContent" placeholder="Write your post here..." required></textarea>
-          <button type="submit">Submit</button>
-        </form>
-        <div id="posts"></div>
-      </div>
-    </section>
+       <section id="destinations" class="destinations">
+        <h1 id="forum-title">Discussion Forum</h1>
+        <div class="post-container">
+          <form id="postForm">
+            <textarea id="postContent" placeholder="Write your post here..." required></textarea>
+            <button type="submit" id="submit-button">Submit</button>
+          </form>
+          <div id="posts"></div>
+        </div>
+      </section>
     <!-- Add more sections for other categories -->
   </main>
   <script src="finance.js"></script>