Update templates/forums.html

templates/forums.html

@@ -2,24 +2,143 @@
 
 {% block title %}Forums{% endblock %}
 
+{% block styles %}
+    <style>
+        /* Animated underline */
+        nav a.link:hover, .topics:hover {
+            color: #fff;
+        }
+
+        nav a.link:hover::before, footer ul li a:hover::before, .topics:hover::before {
+            transform: scaleX(1);
+        }
+
+        /* Global */
+        html {
+            font-family: 'JetBrains Mono', monospace;
+            background: #1F1F1F;
+        }
+
+        body {
+            background-color: #f8f9fa;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            margin: 0 auto;
+            background: #1F1F1F;
+            color: #fff;
+        }
+
+        h1 {
+            font-weight: bold;
+            color: #0889E5;
+            margin: 1rem 0;
+        }
+
+        a {
+            color: #0889E5;
+        }
+
+        hr {
+            border: none;
+            border-top: 1px solid #B6C7D3;
+        }
+
+        /* Navbar */
+        nav {
+            background: #1a1b1e;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem 2rem;
+            color: #fff;
+        }
+
+        nav img {
+            margin: 0;
+        }
+
+        nav li a, nav a.link {
+            text-decoration: none;
+            padding: 0.6rem 0.25rem;
+            position: relative;
+            color: #fff;
+        }
+
+        nav a.link::before {
+            content: "";
+            position: absolute;
+            display: block;
+            width: 80%;
+            height: 2px;
+            bottom: -2px;
+            left: 10%;
+            transform: translateX(-50%);
+            background-color: #fff;
+            transform-origin: center;
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        nav ul {
+            display: flex;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            align-items: flex-end;
+            justify-content: flex-end;
+        }
+
+        nav ul li {
+            margin-right: 1.5rem;
+        }
+
+        nav ul li:last-child {
+            margin-right: 0;
+        }
+
+        /* Content Section */
+        .content {
+            padding: 50px;
+        }
+
+        h2 {
+            font-style: italic;
+        }
+
+        /* Forums */
+        .forum-card {
+            margin-bottom: 20px;
+        }
+
+        .forum-media {
+            max-width: 100%;
+            height: auto;
+        }
+    </style>
+{% endblock %}
+
 {% block content %}
-<div class="container">
+<div class="container mt-4">
     <div class="row">
         <div class="col-md-12">
-            <h1>Welcome to the Forums!</h1>
+            <h1 class="mb-4">Welcome to the Forums!</h1>
             {% for category in categories %}
-            <div class="card mt-4">
-                <div class="card-header">{{ category.category_name }}</div>
+            <div class="card forum-card mb-4">
+                <div class="card-header"><a class="forum-link" href="{{ url_for('category', category_name=category.category_name.lower()) }}">{{ category.category_name }}</a></div>
                 <div class="card-body">
                     <div class="list-group">
                         {% set count = 0 %}
                         {% for post in posts %}
                         {% if post.category_id == category.id %}
-                        {% if count < 10 %}
-                        <a href="{{ url_for('new_post', post_id=post.id) }}" class="list-group-item list-group-item-action">
+                        {% if count < 4 %}
+                        <a href="{{ url_for('view_post', category_name=category.category_name.lower(), post_id=post.id) }}" class="list-group-item list-group-item-action">
                             <h5 class="mb-1">{{ post.post_name }}</h5>
                             <p class="mb-1">{{ post.text }}</p>
-                            <small>Created by {{ post.created_by }} - {{ post.creation_date }}</small>
+                            <small>Created by {{ post.created_by }} - {{ post.creation_date.strftime('%Y-%m-%d %H:%M') }}</small>
+                            {% if post.media %}
+                            <img src="{{ url_for('uploads', filename=post.media.filename) }}" class="forum-media mt-2" alt="Post Media">
+                            {% endif %}
                         </a>
                         {% set count = count + 1 %}
                         {% endif %}