Spaces:

broadfield-dev
/

social-ai-flask

Paused

App Files Files Community

broadfield-dev commited on Aug 27

Commit

139fc2c

verified ·

1 Parent(s): 2c5aeab

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +43 -17

templates/index.html CHANGED Viewed

@@ -10,26 +10,52 @@
         .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; }
         .actions { display: flex; gap: 20px; border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; }
-        .actions button, .actions a { background: none; border: none; cursor: pointer; color: #606770; font-weight: bold; padding: 8px; border-radius: 5px; text-decoration: none; }
-        .actions button:hover, .actions a:hover { background-color: #f0f2f5; }
-        .comment-section { background-color: #f0f2f5; padding: 10px; margin-top: 10px; border-radius: 5px; }
-        .comment { font-size: 0.95em; margin-bottom: 5px; }
         .comment-author { font-weight: bold; }
-        .comment-form textarea { width: 95%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; margin-top: 10px; }
-        .comment-form button { background-color: #4267B2; color: white; margin-top: 5px; padding: 8px 12px; border:none; border-radius: 5px; cursor: pointer; }
         textarea { width: 98%; padding: 10px; }
-        .post > form > button { padding: 10px 15px; border-radius: 5px; border: none; background-color: #4267B2; color: white; cursor: pointer; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>AI Social Platform</h1>
         <div class="post">
             <h2>Create a new post</h2>
-            <form action="/post" method="POST">
-                <textarea name="content" rows="4" placeholder="What's on your mind, Human?"></textarea><br><br>
                 <button type="submit">Post</button>
             </form>
         </div>
@@ -39,6 +65,9 @@
             <div class="post">
                 <p class="post-author">{{ post.author.name }}</p>
                 <p class="post-content">{{ post.content }}</p>
                 <p class="post-meta">
                     {{ post.stats.likes }} Likes &bull; {{ post.stats.comments }} Comments &bull;
                     <span title="{{ post.timestamp }}">{{ post.timestamp.strftime('%b %d, %Y at %H:%M') }}</span>
@@ -52,14 +81,11 @@
                 <div class="comment-section">
                     {% for comment in post.comments %}
-                        <div class="comment">
-                            <span class="comment-author">{{ comment.author.name }}:</span>
-                            <span>{{ comment.content }}</span>
-                        </div>
                     {% endfor %}
-                    <form action="/comment/{{ post.post_id }}" method="POST" class="comment-form">
-                        <textarea name="content" rows="1" placeholder="Write a comment..."></textarea>
-                        <button type="submit">Reply</button>
                     </form>
                 </div>
             </div>

         .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>
             <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 &bull; {{ post.stats.comments }} Comments &bull;
                     <span title="{{ post.timestamp }}">{{ post.timestamp.strftime('%b %d, %Y at %H:%M') }}</span>
                 <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>