Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Translator API - Alternative gratuite à Google Translate</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; min-height: 100vh; padding: 20px; } | |
| .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px; } | |
| h1 { color: #1a73e8; margin-bottom: 10px; } | |
| .subtitle { color: #666; margin-bottom: 30px; } | |
| .form-group { margin-bottom: 20px; } | |
| label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } | |
| textarea { width: 100%; min-height: 150px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; } | |
| .row { display: flex; gap: 20px; margin-bottom: 20px; } | |
| .row .form-group { flex: 1; } | |
| select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: white; } | |
| button { background: #1a73e8; color: white; border: none; padding: 14px 28px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.2s; width: 100%; } | |
| button:hover { background: #1557b0; } | |
| button:disabled { background: #ccc; cursor: not-allowed; } | |
| .result { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; display: none; } | |
| .result h3 { margin-bottom: 10px; color: #333; } | |
| .result pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; } | |
| .error { color: #dc3545; margin-top: 10px; display: none; } | |
| .links { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } | |
| .links a { color: #1a73e8; text-decoration: none; margin-right: 20px; } | |
| .links a:hover { text-decoration: underline; } | |
| .stats { display: flex; gap: 20px; margin-bottom: 20px; font-size: 14px; color: #666; } | |
| .stat { background: #f8f9fa; padding: 8px 16px; border-radius: 20px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🌐 Translator API</h1> | |
| <p class="subtitle">Alternative gratuite à Google Translate via API REST</p> | |
| <div class="stats"> | |
| <div class="stat">⚡ 30 req/min/IP</div> | |
| <div class="stat">🔓 Pas de clé API</div> | |
| <div class="stat">📚 Wiki intégré</div> | |
| </div> | |
| <form id="translateForm"> | |
| <div class="form-group"> | |
| <label for="sourceText">Texte à traduire</label> | |
| <textarea id="sourceText" placeholder="Entrez votre texte ici..." required></textarea> | |
| </div> | |
| <div class="row"> | |
| <div class="form-group"> | |
| <label for="sourceLang">De</label> | |
| <select id="sourceLang"> | |
| <option value="auto">🔍 Détection auto</option> | |
| <option value="fr">🇫🇷 Français</option> | |
| <option value="en">🇺🇸 Anglais</option> | |
| <option value="es">🇪🇸 Espagnol</option> | |
| <option value="de">🇩🇪 Allemand</option> | |
| <option value="it">🇮🇹 Italien</option> | |
| <option value="pt">🇵🇹 Portugais</option> | |
| <option value="ru">🇷🇺 Russe</option> | |
| <option value="zh">🇨🇳 Chinois</option> | |
| <option value="ja">🇯🇵 Japonais</option> | |
| <option value="ko">🇰🇷 Coréen</option> | |
| <option value="ar">🇸🇦 Arabe</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="targetLang">Vers</label> | |
| <select id="targetLang"> | |
| <option value="fr">🇫🇷 Français</option> | |
| <option value="en">🇺🇸 Anglais</option> | |
| <option value="es">🇪🇸 Espagnol</option> | |
| <option value="de">🇩🇪 Allemand</option> | |
| <option value="it">🇮🇹 Italien</option> | |
| <option value="pt">🇵🇹 Portugais</option> | |
| <option value="ru">🇷🇺 Russe</option> | |
| <option value="zh">🇨🇳 Chinois</option> | |
| <option value="ja">🇯🇵 Japonais</option> | |
| <option value="ko">🇰🇷 Coréen</option> | |
| <option value="ar">🇸🇦 Arabe</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button type="submit" id="translateBtn">Traduire</button> | |
| <div class="error" id="errorMsg"></div> | |
| </form> | |
| <div class="result" id="result"> | |
| <h3>Résultat</h3> | |
| <pre id="translatedText"></pre> | |
| <small id="metaInfo"></small> | |
| </div> | |
| <div class="links"> | |
| <a href="/wiki">📖 Wiki / Documentation</a> | |
| <a href="/admin">🔐 Panel Admin</a> | |
| <a href="https://github.com/NathMen12/Translator-API" target="_blank">💻 GitHub</a> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('translateForm').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const btn = document.getElementById('translateBtn'); | |
| const errorMsg = document.getElementById('errorMsg'); | |
| const result = document.getElementById('result'); | |
| const translatedText = document.getElementById('translatedText'); | |
| const metaInfo = document.getElementById('metaInfo'); | |
| btn.disabled = true; | |
| btn.textContent = 'Traduction en cours...'; | |
| errorMsg.style.display = 'none'; | |
| result.style.display = 'none'; | |
| try { | |
| const response = await fetch('/translate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| text: document.getElementById('sourceText').value, | |
| source: document.getElementById('sourceLang').value, | |
| target: document.getElementById('targetLang').value | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok) { | |
| throw new Error(data.error || 'Erreur de traduction'); | |
| } | |
| translatedText.textContent = data.translatedText; | |
| metaInfo.textContent = `Temps: ${data.duration}ms • De: ${data.source} → Vers: ${data.target}`; | |
| result.style.display = 'block'; | |
| } catch (err) { | |
| errorMsg.textContent = err.message; | |
| errorMsg.style.display = 'block'; | |
| } finally { | |
| btn.disabled = false; | |
| btn.textContent = 'Traduire'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |