Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Traductions Yipunu</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| margin: 20px; | |
| background-color: #f4f4f4; | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| .translation-container { | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| padding: 15px; | |
| margin: 15px 0; | |
| border-radius: 8px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; /* Alignez au début */ | |
| } | |
| .translation-text{ | |
| flex: 2; /* Prend plus d'espace */ | |
| padding-right: 20px | |
| } | |
| .translation-actions { | |
| display: flex; | |
| flex-direction: column; /* Alignez verticalement */ | |
| } | |
| .translation-actions a, .translation-actions button { | |
| display: inline-block; | |
| margin: 5px; | |
| padding: 8px 12px; | |
| background-color: #007bff; | |
| color: #fff; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| border: none; | |
| cursor: pointer; | |
| text-align: center; | |
| transition: background-color 0.3s ease; | |
| } | |
| .translation-actions button { | |
| background-color: #28a745; | |
| } | |
| .translation-actions a:hover, .translation-actions button:hover { | |
| background-color: #0056b3; | |
| } | |
| textarea{ | |
| margin-top: 10px; | |
| border-radius:5px; | |
| width: 250px; | |
| padding: 8px 12px | |
| } | |
| .likes-dislikes { | |
| font-size: .8em; | |
| margin-top: 10px | |
| } | |
| .feedback-sent{ | |
| font-size: .8em; | |
| margin-top: 10px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Traductions Yipunu</h1> | |
| <div id="translations-container"> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| fetch('/data') | |
| .then(response => response.json()) | |
| .then(data => { | |
| const translations = data.translations; | |
| const translationsContainer = document.getElementById('translations-container'); | |
| translations.forEach(translation => { | |
| const container = document.createElement('div'); | |
| container.className = 'translation-container'; | |
| const textDiv = document.createElement('div'); | |
| textDiv.className = 'translation-text' | |
| textDiv.innerHTML = `<p><strong>Français:</strong> ${translation.fr}</p> | |
| <p><strong>Yipunu:</strong> ${translation.yi}</p> | |
| <p class="likes-dislikes">Likes: <span id="likes-${translation.id}">${translation.likes}</span> | Dislikes: <span id="dislikes-${translation.id}">${translation.dislikes}</span></p> | |
| ` | |
| const actionDiv = document.createElement('div'); | |
| actionDiv.className = "translation-actions" | |
| const likeLink = document.createElement('a'); | |
| likeLink.href = `/vote/${translation.id}/like`; | |
| likeLink.innerText = 'Like'; | |
| likeLink.onclick = async (e) => { | |
| e.preventDefault(); | |
| await voteTranslation(translation.id, 'like'); | |
| }; | |
| const dislikeLink = document.createElement('a'); | |
| dislikeLink.href = `/vote/${translation.id}/dislike`; | |
| dislikeLink.innerText = 'Dislike'; | |
| dislikeLink.onclick = async (e) => { | |
| e.preventDefault(); | |
| await voteTranslation(translation.id, 'dislike'); | |
| }; | |
| const feedbackForm = document.createElement('form'); | |
| feedbackForm.action = `/submit_feedback/${translation.id}`; | |
| feedbackForm.method = 'POST'; | |
| const feedbackTextarea = document.createElement('textarea'); | |
| feedbackTextarea.name = 'feedback'; | |
| feedbackTextarea.placeholder = 'Laisser votre avis'; | |
| const feedbackButton = document.createElement('button'); | |
| feedbackButton.type = 'submit'; | |
| feedbackButton.innerText = 'Envoyer avis'; | |
| feedbackForm.appendChild(feedbackTextarea); | |
| feedbackForm.appendChild(feedbackButton); | |
| feedbackForm.addEventListener('submit', async(e)=>{ | |
| e.preventDefault(); | |
| await submitFeedback(translation.id, feedbackTextarea.value, container); | |
| }); | |
| actionDiv.appendChild(likeLink); | |
| actionDiv.appendChild(dislikeLink); | |
| actionDiv.appendChild(feedbackForm); | |
| const feedbackStatus = document.createElement('p'); | |
| feedbackStatus.className = 'feedback-sent'; | |
| if(translation.feedback_sent){ | |
| feedbackStatus.textContent = "Feedback envoyé" | |
| } | |
| actionDiv.appendChild(feedbackStatus); | |
| container.appendChild(textDiv); | |
| container.appendChild(actionDiv); | |
| translationsContainer.appendChild(container); | |
| }); | |
| }) | |
| .catch(error => console.error('Error fetching data:', error)); | |
| }); | |
| async function voteTranslation(id, action) { | |
| try { | |
| await fetch(`/vote/${id}/${action}`); | |
| const translation = translations.find(t => t.id === id); | |
| if(action == "like") { | |
| translation.likes += 1 | |
| document.getElementById(`likes-${id}`).innerText = translation.likes; | |
| } else { | |
| translation.dislikes += 1 | |
| document.getElementById(`dislikes-${id}`).innerText = translation.dislikes; | |
| } | |
| } catch (error) { | |
| console.error('Error during vote:', error); | |
| } | |
| } | |
| async function submitFeedback(id, feedback, container) { | |
| try { | |
| const formData = new FormData(); | |
| formData.append('feedback', feedback); | |
| const response = await fetch(`/submit_feedback/${id}`, { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| const feedbackSentElement = container.querySelector('.feedback-sent'); | |
| if (feedbackSentElement){ | |
| feedbackSentElement.textContent = 'Feedback envoyé'; | |
| } else { | |
| const newFeedbackSentElement = document.createElement('p'); | |
| newFeedbackSentElement.className = "feedback-sent"; | |
| newFeedbackSentElement.textContent = 'Feedback envoyé'; | |
| container.querySelector('.translation-actions').appendChild(newFeedbackSentElement); | |
| } | |
| const translation = translations.find(t => t.id === id); | |
| translation.feedback_sent = true | |
| } else { | |
| console.error('Error submitting feedback'); | |
| } | |
| } catch (error) { | |
| console.error('Error during submitting feedback:', error); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |