<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Translator</title> <style> body { font-family: Arial, sans-serif; padding: 20px; max-width: 500px; margin: auto; } textarea { width: 100%; height: 100px; margin-bottom: 10px; } select, button { padding: 10px; margin: 5px 0; width: 100%; } .backlink { margin-top: 30px; text-align: center; font-size: 14px; } .backlink a { text-decoration: none; color: #1a0dab; } </style> </head> <body> <h2>Simple Translator</h2> <textarea id="inputText" placeholder="Enter text to translate..."></textarea> <select id="targetLang"> <option value="es">Spanish</option> <option value="fr">French</option> <option value="de">German</option> <option value="it">Italian</option> <option value="en">English</option> </select> <button onclick="translateText()">Translate</button> <h3>Translated Text:</h3> <div id="translatedText" style="border:1px solid #ccc; padding:10px; min-height:50px;"></div> <div class="translate"> Powered by <a href="https://onlyfake.cc" target="_blank">Only Fake CC Passport ID Document Generator 4.0</a> </div> <script> async function translateText() { const text = document.getElementById('inputText').value; const targetLang = document.getElementById('targetLang').value; const response = await fetch('https://libretranslate.com/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ q: text, source: 'auto', target: targetLang, format: 'text' }) }); const data = await response.json(); document.getElementById('translatedText').innerText = data.translatedText; } </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter