diff --git a/frontend/application/templates/forum/user.html b/frontend/application/templates/forum/user.html index fabb149c58fc7d782225090898c61e2e46deb4ef..f4e6fe25a82e6d7a8d5678f89d6428e83f493437 100644 --- a/frontend/application/templates/forum/user.html +++ b/frontend/application/templates/forum/user.html @@ -1,6 +1,56 @@ +<!DOCTYPE html> +<html> <head> -<style> - .home-btn { + <title>USER PROFILE</title> + <style> + .user-info-card { + background-color: #d1e3f5; + border-radius: 10px; + padding: 30px; + box-shadow: 0px 2px 8px rgb(255, 255, 255); + margin: auto; + display: flex; +flex-direction: column; +justify-content: center; +align-items: center; + + } + + .user-info-card img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 50%; + margin-bottom: 20px; + } + + .user-info-card h5 { + font-weight: bold; + margin-bottom: 10px; + } + + .user-info-card div { + color: #555555; + margin-bottom: 10px; + } + + .post-card { + background-color: white; + border-radius: 10px; + padding: 30px; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); + } + + .post-card h4 { + font-weight: bold; + margin-bottom: 10px; + } + + .post-card p { + color: #555555; + margin-bottom: 0px; + } + .home-btn { background-color: #2196F3; color: white; padding: 10px; @@ -9,47 +59,37 @@ font-size: 16px; cursor: pointer; margin-bottom: 20px; - } - .profile-image { - width: 100px; - height: 100px; - object-fit: ; - border-radius: 50%; - } -</style> +} + </style> </head> -<title>USER PROFILE</title> -{% extends "base.html" %} - -{% block content %} - <div class="container-fluid"> - <div class="row"> - <div class="col-md-4 position-fixed w-100 h-100 left-0 top-0"> - <div class="user-info" style="margin-top: 50px;"> - <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a> - <br><br> - <img class="profile-image" src="images/users/{{ image }}"> - <br><br> - <div class="h5">{{ name }}</div> - <div>{{ email }}</div> - <div>{{ role }}</div> - </div> - </div> - <div class="col-md-8 offset-md-4" style="margin-top: 50px;"> - <h2>POSTS OF THE USER</h2> - <div style="height: 1500px; overflow-y: scroll;"> - {% for post in posts %} - <div class="card"> - <div class="card-body"> - <h4 class="card-title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h4> - <p class="card-text">{{ post.content | safe }}</p> - </div> - </div> - <br> - {% endfor %} - </div> - </div> - </div> - </div> -{% endblock %} +<body> + <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a> +{% from 'macros.html' import displayField %} + </nav> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-4 position-fixed w-100 h-100 left-0 top-0"> + <div class="user-info-card"> + <img src="images/users/{{ image }}" alt="User profile picture"> + <h5>{{ name }}</h5> + <div>{{ email }}</div> + <div>{{ role }}</div> + </div> + </div> + <div class="col-md-8 offset-md-4" style="margin-top: 50px;"> + <h2>POSTS OF THE USER</h2> + <div style="height: 1500px; overflow-y: scroll;"> + {% for post in posts %} + <div class="post-card"> + <h4><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h4> + <p>{{ post.content | safe }}</p> + </div> + <br> + {% endfor %} + </div> + </div> + </div> + </div> +</body> +</html>