Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Traduction Yipunu</title> | |
| <style> | |
| body { font-family: sans-serif; margin: 20px;} | |
| .translation-container {border: 1px solid #eee; padding: 15px; margin: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;} | |
| .translation-container p { margin-bottom: 5px; } | |
| .vote-buttons { display: flex; gap: 10px;} | |
| .vote-buttons button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #4CAF50; color: white;} | |
| .vote-buttons button:hover { opacity: 0.8; } | |
| .vote-buttons button.dislike {background-color: #f44336;} | |
| .feedback-form { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } | |
| .feedback-form textarea { padding: 10px; border-radius: 5px; border: 1px solid #ddd; } | |
| .feedback-form button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #2196F3; color: white;} | |
| .feedback-form button:hover {opacity: 0.8;} | |
| .feedback-sent { color: green; font-style: italic; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Traductions Yipunu</h1> | |
| {% for translation in translations %} | |
| <div class="translation-container"> | |
| <div> | |
| <p><strong>Français:</strong> {{ translation.fr }}</p> | |
| <p><strong>Yipunu:</strong> {{ translation.yi }}</p> | |
| <p> | |
| Likes: {{ translation.likes }} | Dislikes: {{ translation.dislikes }} | |
| </p> | |
| </div> | |
| <div> | |
| <div class="vote-buttons"> | |
| <button onclick="handleVote({{ translation.id }}, 'like')">👍 Like</button> | |
| <button onclick="handleVote({{ translation.id }}, 'dislike')" class="dislike">👎 Dislike</button> | |
| </div> | |
| {% if not translation.feedback_sent %} | |
| <form class="feedback-form" onsubmit="submitFeedback({{ translation.id }}); return false;"> | |
| <textarea name="feedback" id="feedback-{{translation.id}}" placeholder="Laissez votre avis"></textarea> | |
| <button type="submit">Envoyer avis</button> | |
| </form> | |
| {% else %} | |
| <p class="feedback-sent">Feedback envoyé</p> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| <script> | |
| const BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A"; | |
| const CHAT_ID = "-1002081124539"; | |
| function handleVote(id, action) { | |
| fetch(`/vote/${id}/${action}`) | |
| .then(response => { | |
| if (response.ok) { | |
| window.location.reload() | |
| } | |
| }); | |
| } | |
| function submitFeedback(id) { | |
| const feedbackTextarea = document.getElementById('feedback-' + id); | |
| const feedback = feedbackTextarea.value; | |
| const url = `/submit_feedback/${id}`; | |
| const message = `Feedback sur la traduction #${id}:\n\n` + | |
| `Français: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:first-child').textContent.replace('Français: ','')}\n\n`+ | |
| `Yipunu: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:nth-child(2)').textContent.replace('Yipunu: ','')}\n\n`+ | |
| `Avis de l'utilisateur:\n${feedback}`; | |
| fetch(url,{ | |
| method: "POST", | |
| body: new URLSearchParams({ | |
| "feedback": message | |
| }) | |
| }).then(response => { | |
| if (response.ok) { | |
| fetch(`/vote/${id}/submit`).then(r=> { | |
| if(r.ok) { | |
| window.location.reload() | |
| } | |
| }); | |
| } | |
| }); | |
| const telegramApiUrl = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`; | |
| fetch(telegramApiUrl, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| chat_id: CHAT_ID, | |
| text: message, | |
| parse_mode: "HTML" | |
| }) | |
| }) | |
| .then(response => { | |
| if(!response.ok){ | |
| console.log('erreur',response); | |
| } | |
| }) | |
| feedbackTextarea.value = ''; | |
| } | |
| </script> | |
| </body> | |
| </html> |