Docfile commited on
Commit
dcaa6bc
1 Parent(s): e218737

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +128 -80
templates/index.html CHANGED
@@ -1,108 +1,156 @@
1
- <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <title>Traduction Yipunu</title>
6
  <style>
7
- body { font-family: sans-serif; margin: 20px;}
8
- .translation-container {border: 1px solid #eee; padding: 15px; margin: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;}
9
- .translation-container p { margin-bottom: 5px; }
10
- .vote-buttons { display: flex; gap: 10px;}
11
- .vote-buttons button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #4CAF50; color: white;}
12
- .vote-buttons button:hover { opacity: 0.8; }
13
- .vote-buttons button.dislike {background-color: #f44336;}
14
- .feedback-form { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
15
- .feedback-form textarea { padding: 10px; border-radius: 5px; border: 1px solid #ddd; }
16
- .feedback-form button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #2196F3; color: white;}
17
- .feedback-form button:hover {opacity: 0.8;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  .feedback-sent { color: green; font-style: italic; }
 
 
 
 
 
19
  </style>
20
  </head>
21
  <body>
22
- <h1>Traductions Yipunu</h1>
23
- {% for translation in translations %}
24
- <div class="translation-container">
25
- <div>
26
- <p><strong>Français:</strong> {{ translation.fr }}</p>
27
- <p><strong>Yipunu:</strong> {{ translation.yi }}</p>
 
 
28
  <p>
29
- Likes: {{ translation.likes }} | Dislikes: {{ translation.dislikes }}
30
  </p>
31
  </div>
32
- <div>
33
  <div class="vote-buttons">
34
  <button onclick="handleVote({{ translation.id }}, 'like')">👍 Like</button>
35
- <button onclick="handleVote({{ translation.id }}, 'dislike')" class="dislike">👎 Dislike</button>
36
- </div>
37
- {% if not translation.feedback_sent %}
38
- <form class="feedback-form" onsubmit="submitFeedback({{ translation.id }}); return false;">
39
- <textarea name="feedback" id="feedback-{{translation.id}}" placeholder="Laissez votre avis"></textarea>
40
- <button type="submit">Envoyer avis</button>
41
- </form>
42
- {% else %}
43
- <p class="feedback-sent">Feedback envoyé</p>
44
- {% endif %}
45
- </div>
46
- </div>
47
- {% endfor %}
48
- <script>
49
- const BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A";
50
- const CHAT_ID = "-1002081124539";
 
51
 
52
- function handleVote(id, action) {
53
- fetch(`/vote/${id}/${action}`)
54
- .then(response => {
55
- if (response.ok) {
56
- window.location.reload()
57
- }
58
- });
59
- }
60
 
61
- function submitFeedback(id) {
62
- const feedbackTextarea = document.getElementById('feedback-' + id);
63
- const feedback = feedbackTextarea.value;
64
- const url = `/submit_feedback/${id}`;
65
- const message = `Feedback sur la traduction #${id}:\n\n` +
66
- `Français: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:first-child').textContent.replace('Français: ','')}\n\n`+
67
- `Yipunu: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:nth-child(2)').textContent.replace('Yipunu: ','')}\n\n`+
68
- `Avis de l'utilisateur:\n${feedback}`;
69
 
70
- fetch(url,{
71
- method: "POST",
72
- body: new URLSearchParams({
73
- "feedback": message
74
- })
75
- }).then(response => {
76
- if (response.ok) {
77
- fetch(`/vote/${id}/submit`).then(r=> {
78
- if(r.ok) {
79
- window.location.reload()
80
- }
81
- });
82
- }
83
- });
84
 
85
- const telegramApiUrl = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`;
86
- fetch(telegramApiUrl, {
87
- method: "POST",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  headers: {
89
- "Content-Type": "application/json"
90
  },
91
- body: JSON.stringify({
92
  chat_id: CHAT_ID,
93
  text: message,
94
  parse_mode: "HTML"
95
- })
96
- })
97
- .then(response => {
98
- if(!response.ok){
99
- console.log('erreur',response);
100
- }
101
  })
 
 
 
 
 
102
 
103
 
104
- feedbackTextarea.value = '';
105
- }
106
- </script>
107
  </body>
108
  </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Traduction Yipunu</title>
7
  <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background-color: #f4f4f4;
13
+ color: #333;
14
+ display: flex;
15
+ flex-direction: column;
16
+ min-height: 100vh;
17
+ }
18
+ nav {
19
+ background-color: #333;
20
+ padding: 1rem;
21
+ color: white;
22
+ text-align: center;
23
+ }
24
+ h1 { margin: 10px 0 20px; }
25
+ .translation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 15px; }
26
+ .translation-container {
27
+ background-color: #fff;
28
+ border: 1px solid #eee;
29
+ padding: 15px;
30
+ border-radius: 8px;
31
+ display: flex;
32
+ flex-direction: column;
33
+ justify-content: space-between;
34
+ align-items: flex-start;
35
+ }
36
+ .translation-container p { margin-bottom: 5px; }
37
+ .vote-buttons {
38
+ display: flex;
39
+ gap: 10px;
40
+ }
41
+ .vote-buttons button {
42
+ padding: 8px 15px;
43
+ border: none;
44
+ border-radius: 5px;
45
+ cursor: pointer;
46
+ background-color: #4CAF50;
47
+ color: white;
48
+ flex: 1;
49
+ }
50
+ .vote-buttons button:hover { opacity: 0.8; }
51
+ .vote-buttons button.dislike {background-color: #f44336;}
52
+ .feedback-form { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
53
+ .feedback-form textarea { padding: 10px; border-radius: 5px; border: 1px solid #ddd; flex:1; min-height: 80px;}
54
+ .feedback-form button { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; background-color: #2196F3; color: white;}
55
+ .feedback-form button:hover { opacity: 0.8;}
56
  .feedback-sent { color: green; font-style: italic; }
57
+ @media (max-width: 768px) {
58
+ .translation-grid {
59
+ grid-template-columns: 1fr;
60
+ }
61
+ }
62
  </style>
63
  </head>
64
  <body>
65
+ <nav><h1>Traductions Yipunu</h1></nav>
66
+
67
+ <div class="translation-grid">
68
+ {% for translation in translations %}
69
+ <div class="translation-container">
70
+ <div>
71
+ <p><strong>Français:</strong> {{ translation.fr }}</p>
72
+ <p><strong>Yipunu:</strong> {{ translation.yi }}</p>
73
  <p>
74
+ Likes: {{ translation.likes }} | Dislikes: {{ translation.dislikes }}
75
  </p>
76
  </div>
77
+ <div>
78
  <div class="vote-buttons">
79
  <button onclick="handleVote({{ translation.id }}, 'like')">👍 Like</button>
80
+ <button onclick="handleVote({{ translation.id }}, 'dislike')" class="dislike">👎 Dislike</button>
81
+ </div>
82
+ {% if not translation.feedback_sent %}
83
+ <form class="feedback-form" onsubmit="submitFeedback({{ translation.id }}); return false;">
84
+ <textarea name="feedback" id="feedback-{{translation.id}}" placeholder="Laissez votre avis"></textarea>
85
+ <button type="submit">Envoyer avis</button>
86
+ </form>
87
+ {% else %}
88
+ <p class="feedback-sent">Feedback envoyé</p>
89
+ {% endif %}
90
+ </div>
91
+ </div>
92
+ {% endfor %}
93
+ </div>
94
+ <script>
95
+ const BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A";
96
+ const CHAT_ID = "-1002081124539";
97
 
98
+ function handleVote(id, action) {
99
+ fetch(`/vote/${id}/${action}`)
100
+ .then(response => {
101
+ if (response.ok) {
102
+ window.location.reload()
103
+ }
104
+ });
105
+ }
106
 
107
+ function submitFeedback(id) {
108
+ const feedbackTextarea = document.getElementById('feedback-' + id);
109
+ const feedback = feedbackTextarea.value;
110
+ const url = `/submit_feedback/${id}`;
111
+ const message = `Feedback sur la traduction #${id}:\n\n` +
112
+ `Français: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:first-child').textContent.replace('Français: ','')}\n\n`+
113
+ `Yipunu: ${document.querySelector('.translation-container:nth-child('+(id+1)+') p:nth-child(2)').textContent.replace('Yipunu: ','')}\n\n`+
114
+ `Avis de l'utilisateur:\n${feedback}`;
115
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
 
117
+ fetch(url,{
118
+ method: "POST",
119
+ body: new URLSearchParams({
120
+ "feedback": message
121
+ })
122
+ }).then(response => {
123
+ if (response.ok) {
124
+ fetch(`/vote/${id}/submit`).then(r=> {
125
+ if(r.ok) {
126
+ window.location.reload()
127
+ }
128
+ });
129
+ }
130
+ });
131
+
132
+
133
+ const telegramApiUrl = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`;
134
+ fetch(telegramApiUrl, {
135
+ method: "POST",
136
  headers: {
137
+ "Content-Type": "application/json"
138
  },
139
+ body: JSON.stringify({
140
  chat_id: CHAT_ID,
141
  text: message,
142
  parse_mode: "HTML"
143
+ })
 
 
 
 
 
144
  })
145
+ .then(response => {
146
+ if(!response.ok){
147
+ console.log('erreur',response);
148
+ }
149
+ })
150
 
151
 
152
+ feedbackTextarea.value = '';
153
+ }
154
+ </script>
155
  </body>
156
  </html>