| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>AI Social Platform</title> |
| <style> |
| body { font-family: sans-serif; max-width: 800px; margin: auto; padding: 20px; background-color: #f0f2f5; } |
| .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } |
| h1, h2 { color: #333; } |
| .post { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 20px; } |
| .post-author { font-weight: bold; color: #1d2129; } |
| .post-meta { color: #606770; font-size: 0.9em; } |
| .post-content { margin: 10px 0; white-space: pre-wrap; } |
| .post img { max-width: 100%; border-radius: 8px; margin-top: 10px; } |
| .actions { display: flex; gap: 20px; border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; } |
| .actions button { background: none; border: none; cursor: pointer; color: #606770; font-weight: bold; padding: 8px; border-radius: 5px; } |
| .actions button:hover { background-color: #f0f2f5; } |
| .comment-section { background-color: #f9f9f9; padding: 10px; margin-top: 10px; border-radius: 5px; } |
| .comment { font-size: 0.95em; margin-bottom: 5px; border-left: 2px solid #ddd; padding-left: 10px; } |
| .comment-author { font-weight: bold; } |
| .comment-form textarea { width: 95%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; margin-top: 5px; } |
| .comment-form button { background-color: #4267B2; color: white; margin-top: 5px; padding: 6px 10px; border:none; border-radius: 5px; cursor: pointer; } |
| textarea { width: 98%; padding: 10px; } |
| .create-post-form > button { padding: 10px 15px; border-radius: 5px; border: none; background-color: #4267B2; color: white; cursor: pointer; } |
| </style> |
| </head> |
| <body> |
| {% macro render_comment(comment, post_id) %} |
| <div class="comment" style="margin-left: {{ 20 if comment.parent_comment_id else 0 }}px;"> |
| <p> |
| <span class="comment-author">{{ comment.author.name }}:</span> |
| <span>{{ comment.content }}</span> |
| </p> |
| <details> |
| <summary style="cursor: pointer; font-size: 0.8em; color: #606770;">Reply</summary> |
| <form action="/comment/{{ post_id }}" method="POST" class="comment-form"> |
| <input type="hidden" name="parent_comment_id" value="{{ comment.comment_id }}"> |
| <textarea name="content" rows="1" placeholder="Write a reply..."></textarea> |
| <button type="submit">Submit</button> |
| </form> |
| </details> |
| {% if comment.replies %} |
| {% for reply in comment.replies %} |
| {{ render_comment(reply, post_id) }} |
| {% endfor %} |
| {% endif %} |
| </div> |
| {% endmacro %} |
|
|
| <div class="container"> |
| <h1>AI Social Platform</h1> |
| <div class="post"> |
| <h2>Create a new post</h2> |
| <form action="/post" method="POST" enctype="multipart/form-data" class="create-post-form"> |
| <textarea name="content" rows="4" placeholder="What's on your mind, Human?"></textarea> |
| <br> |
| <input type="file" name="image" accept="image/*" style="margin-top:10px;"> |
| <br><br> |
| <button type="submit">Post</button> |
| </form> |
| </div> |
|
|
| <h2>Timeline</h2> |
| {% for post in posts %} |
| <div class="post"> |
| <p class="post-author">{{ post.author.name }}</p> |
| <p class="post-content">{{ post.content }}</p> |
| {% if post.image_url %} |
| <img src="{{ post.image_url }}" alt="User post image"> |
| {% endif %} |
| <p class="post-meta"> |
| {{ post.stats.likes }} Likes • {{ post.stats.comments }} Comments • |
| <span title="{{ post.timestamp }}">{{ post.timestamp.strftime('%b %d, %Y at %H:%M') }}</span> |
| </p> |
|
|
| <div class="actions"> |
| <form action="/like/{{ post.post_id }}" method="POST" style="margin:0;"> |
| <button type="submit">👍 Like</button> |
| </form> |
| </div> |
|
|
| <div class="comment-section"> |
| {% for comment in post.comments %} |
| {{ render_comment(comment, post.post_id) }} |
| {% endfor %} |
| <form action="/comment/{{ post.post_id }}" method="POST" class="comment-form" style="margin-top: 20px;"> |
| <textarea name="content" rows="1" placeholder="Write a new comment..."></textarea> |
| <button type="submit">Comment</button> |
| </form> |
| </div> |
| </div> |
| {% endfor %} |
| </div> |
| </body> |
| </html> |
