<!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>