Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Traduction Fang</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f4f4f4; | |
| color: #333; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| nav { | |
| background-color: #333; | |
| padding: 1rem; | |
| color: white; | |
| text-align: center; | |
| } | |
| h1 { margin: 10px 0 20px; } | |
| .translation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 15px; } | |
| .translation-container { | |
| background-color: #fff; | |
| border: 1px solid #eee; | |
| padding: 15px; | |
| border-radius: 8px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .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; | |
| flex: 1; | |
| } | |
| .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; flex:1; min-height: 80px;} | |
| .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; } | |
| @media (max-width: 768px) { | |
| .translation-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav><h1>Fang</h1></nav> | |
| <h2> Bonjour, Il s'agit d'une liste de traduction non parfaite entre le français et le Fang soumis par l'équipe de coding Tuto. Nous vous invitons ainsi à faire des contributions pour améliorer cela.</h2> | |
| <div class="translation-grid"> | |
| {% for translation in translations %} | |
| <div class="translation-container"> | |
| <div> | |
| <p><strong>Français:</strong> {{ translation.français }}</p> | |
| <p><strong>Fang:</strong> {{ translation.fang }}</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 %} | |
| </div> | |
| <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`+ | |
| `Fang: ${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> |