t.html

<meta name='viewport' content='width=device-width'/>
<script>
var LANGS = [
   {
    "language": "af",
    "name": "Afrikaans"
   },
   {
    "language": "sq",
    "name": "Albanian"
   },
   {
    "language": "ar",
    "name": "Arabic"
   },
   {
    "language": "hy",
    "name": "Armenian"
   },
   {
    "language": "az",
    "name": "Azerbaijani"
   },
   {
    "language": "eu",
    "name": "Basque"
   },
   {
    "language": "be",
    "name": "Belarusian"
   },
   {
    "language": "bn",
    "name": "Bengali"
   },
   {
    "language": "bs",
    "name": "Bosnian"
   },
   {
    "language": "bg",
    "name": "Bulgarian"
   },
   {
    "language": "ca",
    "name": "Catalan"
   },
   {
    "language": "ceb",
    "name": "Cebuano"
   },
   {
    "language": "ny",
    "name": "Chichewa"
   },
   {
    "language": "zh",
    "name": "Chinese (Simplified)"
   },
   {
    "language": "zh-TW",
    "name": "Chinese (Traditional)"
   },
   {
    "language": "hr",
    "name": "Croatian"
   },
   {
    "language": "cs",
    "name": "Czech"
   },
   {
    "language": "da",
    "name": "Danish"
   },
   {
    "language": "nl",
    "name": "Dutch"
   },
   {
    "language": "en",
    "name": "English"
   },
   {
    "language": "eo",
    "name": "Esperanto"
   },
   {
    "language": "et",
    "name": "Estonian"
   },
   {
    "language": "tl",
    "name": "Filipino"
   },
   {
    "language": "fi",
    "name": "Finnish"
   },
   {
    "language": "fr",
    "name": "French"
   },
   {
    "language": "gl",
    "name": "Galician"
   },
   {
    "language": "ka",
    "name": "Georgian"
   },
   {
    "language": "de",
    "name": "German"
   },
   {
    "language": "el",
    "name": "Greek"
   },
   {
    "language": "gu",
    "name": "Gujarati"
   },
   {
    "language": "ht",
    "name": "Haitian Creole"
   },
   {
    "language": "ha",
    "name": "Hausa"
   },
   {
    "language": "iw",
    "name": "Hebrew"
   },
   {
    "language": "hi",
    "name": "Hindi"
   },
   {
    "language": "hmn",
    "name": "Hmong"
   },
   {
    "language": "hu",
    "name": "Hungarian"
   },
   {
    "language": "is",
    "name": "Icelandic"
   },
   {
    "language": "ig",
    "name": "Igbo"
   },
   {
    "language": "id",
    "name": "Indonesian"
   },
   {
    "language": "ga",
    "name": "Irish"
   },
   {
    "language": "it",
    "name": "Italian"
   },
   {
    "language": "ja",
    "name": "Japanese"
   },
   {
    "language": "jw",
    "name": "Javanese"
   },
   {
    "language": "kn",
    "name": "Kannada"
   },
   {
    "language": "kk",
    "name": "Kazakh"
   },
   {
    "language": "km",
    "name": "Khmer"
   },
   {
    "language": "ko",
    "name": "Korean"
   },
   {
    "language": "lo",
    "name": "Lao"
   },
   {
    "language": "la",
    "name": "Latin"
   },
   {
    "language": "lv",
    "name": "Latvian"
   },
   {
    "language": "lt",
    "name": "Lithuanian"
   },
   {
    "language": "mk",
    "name": "Macedonian"
   },
   {
    "language": "mg",
    "name": "Malagasy"
   },
   {
    "language": "ms",
    "name": "Malay"
   },
   {
    "language": "ml",
    "name": "Malayalam"
   },
   {
    "language": "mt",
    "name": "Maltese"
   },
   {
    "language": "mi",
    "name": "Maori"
   },
   {
    "language": "mr",
    "name": "Marathi"
   },
   {
    "language": "mn",
    "name": "Mongolian"
   },
   {
    "language": "my",
    "name": "Myanmar (Burmese)"
   },
   {
    "language": "ne",
    "name": "Nepali"
   },
   {
    "language": "no",
    "name": "Norwegian"
   },
   {
    "language": "fa",
    "name": "Persian"
   },
   {
    "language": "pl",
    "name": "Polish"
   },
   {
    "language": "pt",
    "name": "Portuguese"
   },
   {
    "language": "pa",
    "name": "Punjabi"
   },
   {
    "language": "ro",
    "name": "Romanian"
   },
   {
    "language": "ru",
    "name": "Russian"
   },
   {
    "language": "sr",
    "name": "Serbian"
   },
   {
    "language": "st",
    "name": "Sesotho"
   },
   {
    "language": "si",
    "name": "Sinhala"
   },
   {
    "language": "sk",
    "name": "Slovak"
   },
   {
    "language": "sl",
    "name": "Slovenian"
   },
   {
    "language": "so",
    "name": "Somali"
   },
   {
    "language": "es",
    "name": "Spanish"
   },
   {
    "language": "su",
    "name": "Sundanese"
   },
   {
    "language": "sw",
    "name": "Swahili"
   },
   {
    "language": "sv",
    "name": "Swedish"
   },
   {
    "language": "tg",
    "name": "Tajik"
   },
   {
    "language": "ta",
    "name": "Tamil"
   },
   {
    "language": "te",
    "name": "Telugu"
   },
   {
    "language": "th",
    "name": "Thai"
   },
   {
    "language": "tr",
    "name": "Turkish"
   },
   {
    "language": "uk",
    "name": "Ukrainian"
   },
   {
    "language": "ur",
    "name": "Urdu"
   },
   {
    "language": "uz",
    "name": "Uzbek"
   },
   {
    "language": "vi",
    "name": "Vietnamese"
   },
   {
    "language": "cy",
    "name": "Welsh"
   },
   {
    "language": "yi",
    "name": "Yiddish"
   },
   {
    "language": "yo",
    "name": "Yoruba"
   },
   {
    "language": "zu",
    "name": "Zulu"
   }
  ]

var list=[];
for(var i in LANGS){
  list.push(LANGS[i].name+'('+LANGS[i].language+')');
}
list = list.join(',')



function req(url, cb){
  var x = new XMLHttpRequest;
  x.open('get',url, true);
  x.send();
  x.onreadystatechange=function(){
    if(x.readyState == 4){
      cb(JSON.parse(x.responseText));
    }
  }
}

function save(){
  out = '';
  out+="<tr>";
  for(i in langs){  
    out+="<td>"+document.getElementById('inp'+langs[i]).value+"</td>";
  }
  out+="</tr>";

  images = document.getElementById('imgs').innerHTML;

  if(images.length > 0){
    out+="<tr>"+images+"</tr>"
  }
  localStorage.table += out;

}

function r(text,target,source){
  req('https://www.googleapis.com/language/translate/v2?q='+encodeURIComponent(text)+'&source='+source+'&target='+target+'&key='+localStorage.apikey, function(json){
    
    var value = json.data.translations[0].translatedText
    document.getElementById('inp'+target).value = value;
    
    value=value.replace();
    sound(value, target); 
    window.left -= 1;
    console.log(window.left)
    if(window.left == 1){

      save()
    };   
  });

}


function red(){
  alert("Enter CAPTCHA (to get audio working) and go back")
  location = 'https://translate.google.com/translate_tts?ie=UTF-8&q=hi&tl=en&total=1&idx=0'
}


function sound(value, target){
  document.getElementById('audio'+target).src = 'data:text/html,<audio controls  onerror=\'parent.location="https://translate.google.com/translate_tts?ie=UTF-8&q=hi&tl=en&total=1&idx=0"\' src="https://translate.google.com/translate_tts?ie=UTF-8&q='+encodeURIComponent(value)+'&tl='+target+'&total=1&idx=0&client=tl">play</audio>';  
}

function tr(text,from){
  var images = img(text);
  window.left = langs.length;

  for(var i in langs){
    if(langs[i] != from){
      r(text,langs[i], from);      
    }else{
      sound(text, langs[i])
    }
  }

}

function img(text){
  imgs = '';
  document.getElementById('imgs').innerHTML = ''
  if(text.split(' ').length < 5){
    //https://www.googleapis.com/customsearch/v1?q=vodka&cx=002713200962003262119:ahmjxrf6qfq&key=AIzaSyAUNNEvF5Bsqiw4uoJxPxFKj8DC10Awx0s
    var url = 'https://www.googleapis.com/customsearch/v1?safe=high&searchType=image&q='+encodeURIComponent(text)+'&cx=002713200962003262119:ahmjxrf6qfq&key=AIzaSyAUNNEvF5Bsqiw4uoJxPxFKj8DC10Awx0s';

    req(url, function(json){
      console.log(json);

      for(i=0;i<6;i++){
        imgs+='<img height=150px src="'+json.items[i].link+'">';
      }
      document.getElementById('imgs').innerHTML= imgs;
    });

  }
}


function build(){
  var html = '<table border=1px>'+localStorage.table+'</table>';
  document.getElementById('list').innerHTML=html;
}


if(!localStorage.apikey){
  localStorage.apikey='AIzaSyC2AT4--zGgSyLBL30wBmEyjo-6jYZb0ZU';
  //localStorage.apikey = prompt('Your key for Google Translate API (get at https://console.cloud.google.com/apis/credentials)');
}

if(!localStorage.langs){
  localStorage.langs = prompt('Comma separated langs e.g. "ru,es,en". Choose from '+list);
}
if(localStorage.langs == 'null'){
  document.write('You are using WebView (open in your browser) or entered incorrect API key.')
}else{

langs = localStorage.langs.split(',');
head = '<tr>';
for(i in langs){

  var l=langs[i]
  head+="<td>"+langs[i]+"</td>"
  document.write(l+':<br><textarea style="font-size:30" rows="4" cols="40" onchange=tr(this.value,"'+l+'"); id="inp'+l+'" placeholder="'+l+'"></textarea><br><iframe seamless style="border:0px" height="35px" id="audio'+l+'"></iframe><br>');
}
head+='</tr>'
}
  document.write('<br><div style="width:750px; position:absolute;right:0px;top:0px" id=imgs></div>')


  document.write('<br>Optimized for desktop only! <a href=javascript:build();>History</a>  <a href=javascript:localStorage.clear();>Clear localStorage</a><div id=list></div>')

</script>