Update templates/thread.html

templates/thread.html

@@ -1,45 +1,75 @@
 {% extends "base.html" %}
 {% block title %}{{ thread.title }}{% endblock %}
 {% block content %}
-<h2>{{ thread.title }}</h2>
-<p>Créé le {{ thread.timestamp.strftime('%d/%m/%Y %H:%M:%S') }}</p>
-<hr>
-<h3>Messages</h3>
-{% for msg in messages %}
-    <div class="message {% if msg.removed %}removed{% endif %}">
-        {% if not msg.removed %}
-            <p>{{ msg.content | safe }}</p>
-            <small>Posté le {{ msg.timestamp.strftime('%d/%m/%Y %H:%M:%S') }} - Votes: {{ msg.vote_count }}</small>
-            <div class="message-actions">
-                <form action="{{ url_for('vote', message_id=msg.id, action='up') }}" method="POST" style="display:inline;">
-                    <button type="submit">Upvote</button>
-                </form>
-                <form action="{{ url_for('vote', message_id=msg.id, action='down') }}" method="POST" style="display:inline;">
-                    <button type="submit">Downvote</button>
-                </form>
-                <form action="{{ url_for('report', message_id=msg.id) }}" method="POST" style="display:inline;">
-                    <button type="submit">Signaler</button>
-                </form>
-                <button onclick="quoteMessage('{{ msg.id }}', '{{ msg.content|escapejs }}')">Citer</button>
-            </div>
-        {% else %}
-            <p><em>Message supprimé par modération.</em></p>
-        {% endif %}
-    </div>
-    <hr>
-{% else %}
-    <p>Aucun message pour ce fil.</p>
-{% endfor %}
-<hr>
-<h3>Répondre</h3>
-<form method="POST" action="{{ url_for('thread', thread_id=thread.id) }}">
-    <textarea name="content" id="reply-content" rows="5" placeholder="Votre réponse ici..." required></textarea><br>
-    <button type="button" onclick="previewMessage()">Prévisualiser</button>
-    <button type="submit">Poster</button>
-</form>
-<div id="preview-area"></div>
+<h2 class="text-2xl font-semibold mb-2">{{ thread.title }}</h2>  <!-- Titre du fil -->
+<p class="text-gray-500 mb-4">Créé le {{ thread.timestamp.strftime('%d/%m/%Y %H:%M:%S') }}</p>  <!-- Date de création -->
+
+<div class="messages space-y-6">  <!-- Conteneur pour les messages, espacement vertical -->
+    {% for msg in messages %}
+        <div class="message {% if msg.removed %}bg-gray-200 text-gray-500{% else %}bg-white{% endif %} p-4 rounded-md shadow-sm">  <!-- Style du message, condition pour les messages supprimés -->
+            {% if not msg.removed %}
+                <p class="text-gray-800">{{ msg.content | safe }}</p>  <!-- Contenu du message -->
+                <div class="text-sm text-gray-500 mt-1 mb-2">  <!-- Informations sur le message -->
+                    Posté le {{ msg.timestamp.strftime('%d/%m/%Y %H:%M:%S') }} - Votes: {{ msg.vote_count }}
+                </div>
+                <div class="message-actions flex items-center space-x-4">  <!-- Actions sur le message -->
+                    <form action="{{ url_for('vote', message_id=msg.id, action='up') }}" method="POST">
+                        <button type="submit" aria-label="Upvote"
+                                class="text-green-500 hover:text-green-700 transition-colors duration-200">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+                            </svg>
+                        </button>
+                    </form>
+                    <form action="{{ url_for('vote', message_id=msg.id, action='down') }}" method="POST">
+                        <button type="submit" aria-label="Downvote"
+                                class="text-red-500 hover:text-red-700 transition-colors duration-200">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" />
+                            </svg>
+                        </button>
+                    </form>
+                    <form action="{{ url_for('report', message_id=msg.id) }}" method="POST">
+                        <button type="submit" aria-label="Report"
+                                class="text-yellow-600 hover:text-yellow-800 transition-colors duration-200">
+                                  Signaler
+
+                        </button>
+                    </form>
+                      <button onclick="quoteMessage('{{ msg.id }}', '{{ msg.content|escapejs }}')"
+                            class="text-blue-500 hover:text-blue-700 transition-colors duration-200">
+                        Citer
+                    </button>
+                </div>
+            {% else %}
+                <p class="italic">Message supprimé par modération.</p>  <!-- Message supprimé -->
+            {% endif %}
+        </div>
+    {% else %}
+        <p class="text-gray-600">Aucun message pour ce fil.</p>  <!-- Aucun message -->
+    {% endfor %}
+</div>
+
+<div class="mt-6">  <!-- Marge en haut -->
+    <h3 class="text-xl font-semibold mb-3">Répondre</h3>  <!-- Titre du formulaire -->
+    <form method="POST" action="{{ url_for('thread', thread_id=thread.id) }}" class="space-y-4">  <!-- Formulaire de réponse -->
+        <textarea name="content" id="reply-content" rows="5" placeholder="Votre réponse ici..." required
+                  class="block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
+        <div class="flex items-center space-x-4">  <!-- Boutons -->
+            <button type="button" onclick="previewMessage()"
+                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition-colors duration-200">
+                Prévisualiser
+            </button>
+            <button type="submit"
+                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
+                Poster
+            </button>
+        </div>
+    </form>
+    <div id="preview-area" class="mt-4"></div>  <!-- Zone de prévisualisation -->
+</div>
+
 <script>
-// Prévisualisation via l'API /preview
 function previewMessage() {
     const content = document.getElementById('reply-content').value;
     fetch('{{ url_for('preview') }}', {
@@ -53,11 +83,12 @@ function previewMessage() {
           document.getElementById('preview-area').innerHTML = data.preview;
       });
 }
-// Fonction de citation : ajoute le contenu cité dans la zone de réponse
+
 function quoteMessage(messageId, content) {
     const replyArea = document.getElementById('reply-content');
-    replyArea.value = "> " + content + "\n\n" + replyArea.value;
+    const quotedContent = `<div class="quoted-text"><p class="quoted-message-id">ID du message: ${messageId}</p>${content}</div>`;
+    replyArea.value = quotedContent + "\n\n" + replyArea.value;
     replyArea.focus();
 }
 </script>
-{% endblock %}
+{% endblock %}