Serveur

Sleeping

App Files Files Community

Docfile commited on 6 days ago

Commit

6fc0bdd

•

1 Parent(s): eae4b54

Create fang.html

Browse files

Files changed (1) hide show

templates/fang.html +156 -0

templates/fang.html ADDED Viewed

	@@ -0,0 +1,156 @@

+<!DOCTYPE html>
+<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>
+     <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`+
+                           `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>