semi final update

app.py

@@ -68,11 +68,12 @@ def comments():
             text = request.form['comment']
             comment = {"username": name,"email": email, "comment": text}
             db.child("Comments").push(comment)
-            x = db.child("Comments").get().val()
-            return render_template('comments.html',comments=x)
+            comments = db.child("Comments").get().val()
+            return render_template('comments.html', comments = comments)
         except:
             error = "error"
-    return render_template('comments.html')
+    comments = db.child("Comments").get().val()
+    return render_template('comments.html', comments=comments)
 @app.route('/contact', methods=['GET', 'POST'])
 def contact():
     return render_template('contact.html')

static/style.css

@@ -1561,11 +1561,85 @@ section {
   text-decoration: none;
 }
 
-.form{
-  margin-left: 37%;
-  border: 5px solid #5fcf80;
-  background-color: #5fcf80;
-  border-radius: 50px;
-  width: 500px;
-  padding-top: 10px;
-}
+.form {
+  width: 350px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+  background-color: #f7f7f7;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 5px 5px 5px rgba(0.1, 0.1, 0.1, 0.1);
+}
+
+.username,
+.email,
+.textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.username::placeholder,
+.email::placeholder,
+.textarea::placeholder {
+  color: #999;
+}
+
+input[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+input[type="submit"]:hover {
+  background-color: #45a049;
+}
+
+.form {
+  text-align: center;
+}
+
+/* Styles for the comment section container */
+.comments {
+  width: 100%;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+  background-color: #f7f7f7;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Styles for each comment */
+.comment-place {
+  margin-bottom: 20px;
+  background-color: #ffffff; /* Light background color for each comment */
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.comment-place p {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+/* Username styles */
+.comment-place .username {
+  font-size: 18px;
+  font-weight: bold;
+  color: #007bff; /* Or any other color of your choice */
+  margin-bottom: 5px;
+}
+
+/* Center the comments */
+.comments {
+  text-align: left;
+}

templates/comments.html

@@ -58,18 +58,33 @@ <h1 class="logo me-auto"><a href="/">Mentor</a></h1>
   <form action="/comments" method="post" align="center">
     <br>
     <br>
-    <input type="text" name="username" placeholder="username" required>
+    <input class="username" type="text" name="username" placeholder="name" required>
     <br>
     <br>
-    <input type="email" name="email" placeholder="email" required>
+    <input class="email" type="email" name="email" placeholder="email" required>
     <br>
     <br>
-    <textarea name="comment" placeholder="comment" required></textarea>
+    <textarea class="textarea" name="comment" placeholder="comment" required></textarea>
     <br>
     <br>
     <input type="submit">
     <br>
     <br>
+
+    <hr>
+    <h2>Comments:</h2>
+
+    <div class="comments">
+        {%for i in comments%}
+        <div class="comment-place">
+            <h6>Name: {{comments[i]['username']}}</h6>
+
+            <br>
+
+            <h5>Comment: {{comments[i]['comment']}}</h5>
+        </div>
+        {%endfor%}
+    </div>
 </form>
 </body>
 </html>

templates/scholarships.html

@@ -88,7 +88,7 @@ <h1 class="logo me-auto"><a href="/">Mentor</a></h1>
     <form action="/scholarships" method="post" align="center" class="form">
       <br>
       <br>
-      <input type="text" name="name" placeholder="Name" class="username" required>
+      <input type="text" name="name" placeholder="Name" class="name" required>
       <br>
       <br>
       <input type="email" name="email" placeholder="Email"  class="email" required>

templates/studentlife.html

@@ -82,10 +82,6 @@ <h1 class="logo me-auto"><a href="/">Mentor</a></h1>
     </div>
   </header><!-- End Header -->
   <br><br><br><br><br><br><br><br><br><br><br>
-  {%for i in comments%}
-  {{comments[i]['username']}}<br>
-  {{comments[i]['comment']}}
-  {%endfor%}
 
   <a href="/comments"><button>Check The Comments</button></a>
   <!-- ======= Footer ======= -->