TATAT

by Bintang Anandhiya

HTML

<!DOCTYPE HTML>
<html>

  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Suez+One&display=swap" rel="stylesheet">
  </head>

  <body>
  <div id="overlay1">
  <div id="title">
    <h1>
    Sandi Tata
    </h1>
    <p>
    Cara berkomunikasi sesama spesies Tata.<br>Programmed & Designed by Bintang, with passion
    </p>
  </div>
  <img id="arrb" src="https://cdn0.iconfinder.com/data/icons/feather/96/591276-arrow-right-512.png">
  </div>
  <div id="overlay2">
    <div id="cont">
       <div class="indicator" id="ind_left">
        <p>Bahasa Normal</p>
      </div><div id="smolbtn">
        
      </div><div class="indicator" id="ind_right">
        <p>Sandi Tata</p>
      </div>
      <textarea class="txa" id="txa_input">Helo ta ini bintang, semoga lu bahagia selamanya.</textarea><textarea class="txa" id="txa_output" readonly></textarea>
      <div class="button" id="btn_ubah">
        <p>Translate</p>
      </div>
      <div class="button" id="btn_ubahbalik"></div>
    </div>
  <img id="arr" src="https://cdn0.iconfinder.com/data/icons/feather/96/591276-arrow-right-512.png">
  </div>
  </body>

</html>

CSS

@keyframes bgshift {
  100% {
    background-position: 500px 0;
  }
}

body {
  animation-name: bgshift;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;

  font-family: 'Suez One', sans-serif;
  background-image: url("https://lh3.googleusercontent.com/N8Q3I0waHjVbxXwpflSnOPj81x56APXSb2AVrpArtvxHthYi4nZiGIj_XL2PjgMO5xYlTXeQNNAbI2gjUkjLu7m7DWBMiBKbvp9wBF2uX22_IXOBZAx2YEVniXkaO2kiYezqQIuU4hvsh2PJInH4CYMz05CvgCr-FBPUQM-Drf7_vUUHNNRmgwB3M5MTlurwVvdNEulSlk4su8An5FolSQEgx-3QllnwIu_NfngvubmUuKUVf3ZjIgCCwvmCcaPghNvTw2nkPLtf1jcGAGP0kYsby854jhA-2UupKve9WAHtPQ4kSsB5b1TIkB1QhSACiYb1I6f9mwanWPV2ali8P2o179fiYKUXjk4lMy6zt2mGopKL0aKjhb3VKUXAE38beaKeCcgKajxPOLQRM9OcGvSueqobMLKctmcHnhNfq-jwwv8_5xWEmj5NssyQBkeki3USBLnkm4ZnmUBiX82gt4KyEDLXTfsxNfupdgdXYn8KnFrgnVFlnvdV9PpCwbCvO38V7asY-pfABsdLSKX26xB4u7pSrXV8zJHblrYTFelsfIJpE2U3Si9kyI9snxuCN9lqwXL-e8pi98UV6syvt2jIAH-__7fULoZMd90aDfAfwuYkJA0SaTOJLbqb1pNhhCG91vwIEfTTbYmGa_yFwv-gKaG4OExTPOEVvaKdGkSPKYzH9iBtjOYzSMfMh8SkwoCi=w1366-h695-ft");
  background-size: 500px;

  padding: 0;
  margin: 0;
}

#title {
  width: 60%;
  padding: 0;
  margin: 0;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#title h1 {
  width: 100%;
  padding: 0;
  margin: 0;

  white-space: nowrap;
  color: white;
  font-size: 10vw;
  text-align: center;
}

#title p {
  width: 100%;
  padding: 0;
  margin: 0;

  color: rgb(255, 255, 255, 0.8);
  font-size: 2.5vw;
  text-align: center;
}

#arrb {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: rotate(90deg) translate(-50%, 50%);
  width: 30px;
  filter: invert(1);
}

#cont {
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: auto;
  background-color: #F1F1F1;
  border-radius: 5px;
  padding: 8px;
  line-height: 0;

  box-shadow: 0 0 0.4em rgb(0, 0, 0, 0.2);
}

.txa {
  box-sizing: border-box;
  display: inline-block;
  width: 49.1%;
 ...

JavaScript

var datfor = [ ["Tata","temenan sama","lah teroos"], //SPASI
	 ["Naila","ditikung sama","karenaa"], //KOMA
   ["Taufan","nikung","jadinya"],//TITIK
	 ["Gita","dihajar","siangnya"],
   ["Adit","mencintai","terus"],
   ["Cistya","menikah sama","habisitu"],
   ["Regituy","nyanyi bareng","teroos"],
   ["Rachman","tidur bareng","lah sorenya"],
   ["Yolanda","ngedate sama","eh taunya"],
   ["Bimo","jalan bareng","dan"],
   ["Tyrex","belajar bareng","besoknya"],
   ["Bintang","nyanyi sama","tapi"],
   ["Obin","pacaran sama","karena"],    
   ["Kaisar","nobar sama","gara2"],
   ["Ica","jalan sama","soalnya"],
   ["Marquez","nembak","supaya"],
   ["Bita","bobo bareng","alhasil"],
   ["Hanif","nampol","teruss"],
   ["Umar","nonjok","lusanya"],
   ["Figo","ngegodain","mingdepnya"],
   ["Mora","digodain","terusss"],
   ["Devina","dicium","eh terus"],
   ["Pak Ikhwan","digombalin","eh jadinya"],
   ["Fathi","ngegombalin","eh besoknya"],
   ["Bagas","dirayu sama","eh paginya"],
   ["Bagus","ngerayu","eh habisitu"],
   ["Pak Sp","ditembak","lah terus"],
   ["Pak karji","belajar sama","esoknya"],
   ["Pak Ramzi","jadian sama","nanti"] ];
   
var datrev = {Gita:'a', dihajar:'a', siangnya:'a',
		 Naila:',',ditikung_s:',',karenaa:',', //KOMA
  	 Taufan:'.',nikung:'.',jadinya:'.', //TITIK
     Adit:'b', mencintai:'b', terus:'b',
     Cistya:'c', menikah_s:'c', habisitu:'c',
     Regituy:'d', nyanyi_b:'d', teroos:'d',
     Rachman:'e', tidur_b:'e', l_sorenya:'e',
     Yolanda:'f', ngedate_s:'f', e_taunya:'f',
     Bimo:'g', jalan_b:'g', dan:'g',
     Tyrex:'h', belajar_b:'h', besoknya:'h',
     Bintang:'i', nyanyi_s:'i', tapi:'i',
     Obin:'j', pacaran_s:'j', karena:'j',    
     Kaisar:'k', nobar_s:'k', gara2:'k',
     Ica:'l', jalan_s:'l', soalnya:'l',
     Marquez:'m', nembak:'m', supaya:'m',
     Bita:'n', bobo_b:'n', alhasil:'n',
     Hanif:'o', nampol:'o', teruss:'o',
     Umar:'p', nonjok:'p', lusanya:'p',
     Figo:'q', ngegodain:'q', mingdepnya:'q',
     Mora:'r',...