<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TranslatePro</title>
  <link rel="stylesheet" href="popup.css">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> -->
</head>
<body>
  <div id="main-view">
    <div id="particles-js"></div>
    <div id="content">
      <h1>
        <div class="ai-loader-box">
          <div class="ai-loader"></div>
          <div class="ai-loader-secondary"></div>
          <div class="ai-loader-fast"></div>
        </div>
        <div class="ai-loader-text">
          TranslatePro
          <!-- <span class="ai">AI</span> -->
          <span class="version">1.4v</span>
        </div>
      </h1>
      <div>
        <label for="from">From:</label>
        <select id="from">
          <option value="es">Spanish</option>
          <option value="ru">Russian</option>
          <option value="en">English</option>
          <option value="fr">French</option>
        
          <option value="af">Afrikaans</option>
          <option value="sq">Albanian</option>
          <option value="am">Amharic</option>
          <option value="ar">Arabic</option>
          <option value="hy">Armenian</option>
          <option value="az">Azerbaijani</option>
          <option value="eu">Basque</option>
          <option value="be">Belarusian</option>
          <option value="bn">Bengali</option>
          <option value="bs">Bosnian</option>
          <option value="bg">Bulgarian</option>
          <option value="ca">Catalan</option>
          <option value="ceb">Cebuano</option>
          <option value="zh">Chinese</option>
          <option value="co">Corsican</option>
          <option value="hr">Croatian</option>
          <option value="cs">Czech</option>
          <option value="da">Danish</option>
          <option value="nl">Dutch</option>
          <option value="eo">Esperanto</option>
          <option value="et">Estonian</option>
          <option value="fi">Finnish</option>
          <option value="gl">Galician</option>
          <option value="ka">Georgian</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="gu">Gujarati</option>
          <option value="ht">Haitian Creole</option>
          <option value="ha">Hausa</option>
          <option value="haw">Hawaiian</option>
          <option value="he">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hu">Hungarian</option>
          <option value="is">Icelandic</option>
          <option value="id">Indonesian</option>
          <option value="ga">Irish</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="jv">Javanese</option>
          <option value="kn">Kannada</option>
          <option value="kk">Kazakh</option>
          <option value="km">Khmer</option>
          <option value="ko">Korean</option>
          <option value="ku">Kurdish</option>
          <option value="ky">Kyrgyz</option>
          <option value="lo">Lao</option>
          <option value="la">Latin</option>
          <option value="lv">Latvian</option>
          <option value="lt">Lithuanian</option>
          <option value="lb">Luxembourgish</option>
          <option value="mg">Malagasy</option>
          <option value="ms">Malay</option>
          <option value="ml">Malayalam</option>
          <option value="mt">Maltese</option>
          <option value="mi">Maori</option>
          <option value="mr">Marathi</option>
          <option value="mn">Mongolian</option>
          <option value="ne">Nepali</option>
          <option value="no">Norwegian</option>
          <option value="ny">Nyanja</option>
          <option value="fa">Persian</option>
          <option value="pl">Polish</option>
          <option value="pt">Portuguese</option>
          <option value="pa">Punjabi</option>
          <option value="ro">Romanian</option>
          <option value="sm">Samoan</option>
          <option value="gd">Scottish Gaelic</option>
          <option value="sr">Serbian</option>
          <option value="st">Sesotho</option>
          <option value="sn">Shona</option>
          <option value="sd">Sindhi</option>
          <option value="si">Sinhala</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="so">Somali</option>
          <option value="su">Sundanese</option>
          <option value="sw">Swahili</option>
          <option value="sv">Swedish</option>
          <option value="tg">Tajik</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="uz">Uzbek</option>
          <option value="vi">Vietnamese</option>
          <option value="cy">Welsh</option>
          <option value="xh">Xhosa</option>
          <option value="yi">Yiddish</option>
          <option value="yo">Yoruba</option>
          <option value="zu">Zulu</option>
        </select>        
      </div>
      <div>
        <label for="to">To:</label>
        <select id="to">
          <option value="ru">Russian</option>
          <option value="es">Spanish</option>
          <option value="en">English</option>
          <option value="fr">French</option>
          
          <option value="af">Afrikaans</option>
          <option value="sq">Albanian</option>
          <option value="am">Amharic</option>
          <option value="ar">Arabic</option>
          <option value="hy">Armenian</option>
          <option value="az">Azerbaijani</option>
          <option value="eu">Basque</option>
          <option value="be">Belarusian</option>
          <option value="bn">Bengali</option>
          <option value="bs">Bosnian</option>
          <option value="bg">Bulgarian</option>
          <option value="ca">Catalan</option>
          <option value="ceb">Cebuano</option>
          <option value="zh">Chinese</option>
          <option value="co">Corsican</option>
          <option value="hr">Croatian</option>
          <option value="cs">Czech</option>
          <option value="da">Danish</option>
          <option value="nl">Dutch</option>
          <option value="eo">Esperanto</option>
          <option value="et">Estonian</option>
          <option value="fi">Finnish</option>
          <option value="gl">Galician</option>
          <option value="ka">Georgian</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="gu">Gujarati</option>
          <option value="ht">Haitian Creole</option>
          <option value="ha">Hausa</option>
          <option value="haw">Hawaiian</option>
          <option value="he">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hu">Hungarian</option>
          <option value="is">Icelandic</option>
          <option value="id">Indonesian</option>
          <option value="ga">Irish</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="jv">Javanese</option>
          <option value="kn">Kannada</option>
          <option value="kk">Kazakh</option>
          <option value="km">Khmer</option>
          <option value="ko">Korean</option>
          <option value="ku">Kurdish</option>
          <option value="ky">Kyrgyz</option>
          <option value="lo">Lao</option>
          <option value="la">Latin</option>
          <option value="lv">Latvian</option>
          <option value="lt">Lithuanian</option>
          <option value="lb">Luxembourgish</option>
          <option value="mg">Malagasy</option>
          <option value="ms">Malay</option>
          <option value="ml">Malayalam</option>
          <option value="mt">Maltese</option>
          <option value="mi">Maori</option>
          <option value="mr">Marathi</option>
          <option value="mn">Mongolian</option>
          <option value="ne">Nepali</option>
          <option value="no">Norwegian</option>
          <option value="ny">Nyanja</option>
          <option value="fa">Persian</option>
          <option value="pl">Polish</option>
          <option value="pt">Portuguese</option>
          <option value="pa">Punjabi</option>
          <option value="ro">Romanian</option>
          <option value="sm">Samoan</option>
          <option value="gd">Scottish Gaelic</option>
          <option value="sr">Serbian</option>
          <option value="st">Sesotho</option>
          <option value="sn">Shona</option>
          <option value="sd">Sindhi</option>
          <option value="si">Sinhala</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="so">Somali</option>
          <option value="su">Sundanese</option>
          <option value="sw">Swahili</option>
          <option value="sv">Swedish</option>
          <option value="tg">Tajik</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="uz">Uzbek</option>
          <option value="vi">Vietnamese</option>
          <option value="cy">Welsh</option>
          <option value="xh">Xhosa</option>
          <option value="yi">Yiddish</option>
          <option value="yo">Yoruba</option>
          <option value="zu">Zulu</option>
        </select>        
      </div>
      <div class="translate-response-box">
        <textarea id="tr-entry" class="translate-response" placeholder="Text entry"></textarea>
        <textarea id="tr-output" class="translate-response" readonly placeholder="Text output"></textarea>
      </div>
      <button id="translate-btn"  class="btn-ejecute-margin">
        <img src="icons/traducir.png" alt="icon" class="button-icon">
        Translate
      </button>
    </div>
  </div>
  <div id="alternate-view" style="display: none;">
    <!-- <label for="toggle-hide" class="toggle-small">Estado - Ocultar "Control + Z":</label>
    <button id="execute-btn" >Iniciar Ejecución</button> -->

    <div id="contentDisplay">

    </div>
    <div id="imgToText"></div> <!-- Aqui es donde se ingresara el texto transformado de la imagen -->
    <!-- Área donde se mostrará la respuesta de la IA -->
     
    <h1>
      <div class="ai-loader-box">
        <div class="ai-loader"></div>
        <div class="ai-loader-secondary"></div>
        <div class="ai-loader-fast"></div>
      </div>
      <div class="ai-loader-text">
        TranslatePro
        <span class="ai">AI</span>
        <span class="version">1.4v</span>
      </div>
    </h1>

    <div id="ai-response-box">
      <textarea id="ai-response" readonly placeholder="Aquí aparecerá la respuesta de la IA."></textarea>
    </div>
    
 <!-- Campo de entrada con íconos -->
 <div id="chatbox">
  <div id="left-icon">
    <img src="https://cdn-icons-png.flaticon.com/512/2099/2099247.png" alt="Subir archivo" id="upload-icon">
  </div>
  <textarea id="message-box" placeholder="Escribe tu mensaje aquí..."></textarea>
  <div id="right-icon">
    <img src="https://cdn-icons-png.flaticon.com/512/9333/9333991.png" alt="Enviar mensaje" id="send-icon">
  </div>
</div>

    <!-- Checkboxes para opciones de respuesta -->
    <div class="response-options">
      <div class="checkbox-container">
        <input type="checkbox" id="checkbox1" class="toggle-checkbox five-words"/>
        <label for="checkbox1" class="custom-checkbox">
          <img src="https://cdn-icons-png.flaticon.com/512/8112/8112960.png" alt="Texto" class="response-icon">
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="checkbox2" class="toggle-checkbox detailed-answer"/>
        <label for="checkbox2" class="custom-checkbox">
          <img src="https://cdn-icons-png.flaticon.com/512/15480/15480793.png" alt="Caracter" class="response-icon">
        </label>
      </div>
      <div class="checkbox-container">
        <input type="checkbox" id="checkbox3" class="toggle-checkbox code-answer"/>
        <label for="checkbox3" class="custom-checkbox">
          <img src="https://cdn-icons-png.flaticon.com/512/4486/4486819.png" alt="Código" class="response-icon">
        </label>
      </div>
    </div>
      <!-- Botón de Reset con icono y texto -->
    <button id="reset-btn" class="custom-button">
      <img src="https://cdn-icons-png.flaticon.com/512/560/560450.png" alt="Refresh Icon" class="button-icon-reset">
      Reset
    </button>
  </div>
  <!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script> -->
  <script src="popup.js" defer></script>
  <script src="background.js"></script>
  <script src="content_script.js"></script>
</body>
</html>
